375 lines
6.3 KiB
Plaintext
375 lines
6.3 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href='../router'>angular2/router</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/router/router.ts#L25-L455">angular2/src/router/router.ts (line 25)</a>
|
|
|
|
:markdown
|
|
The `Router` is responsible for mapping URLs to components.
|
|
|
|
You can see the state of the router by inspecting the read-only field `router.navigating`.
|
|
This may be useful for showing a spinner, for instance.
|
|
|
|
## Concepts
|
|
|
|
Routers and component instances have a 1:1 correspondence.
|
|
|
|
The router holds reference to a number of <a href='RouterOutlet-interface.html'><code>RouterOutlet</code></a>.
|
|
An outlet is a placeholder that the router dynamically fills in depending on the current URL.
|
|
|
|
When the router navigates from a URL, it must first recognize it and serialize it into an
|
|
`Instruction`.
|
|
The router uses the `RouteRegistry` to get an `Instruction`.
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3#constructor constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor(registry: RouteRegistry, parent: Router, hostComponent: any)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#navigating navigating
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#lastNavigationAttempt lastNavigationAttempt
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#registry registry
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#parent parent
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#hostComponent hostComponent
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#childRouter childRouter
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
childRouter(hostComponent: any)
|
|
|
|
:markdown
|
|
Constructs a child router. You probably don't need to use this unless you're writing a reusable
|
|
component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#auxRouter auxRouter
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
auxRouter(hostComponent: any)
|
|
|
|
:markdown
|
|
Constructs a child router. You probably don't need to use this unless you're writing a reusable
|
|
component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#registerPrimaryOutlet registerPrimaryOutlet
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
registerPrimaryOutlet(outlet: RouterOutlet)
|
|
|
|
:markdown
|
|
Register an outlet to notified of primary route changes.
|
|
|
|
You probably don't need to use this unless you're writing a reusable component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#registerAuxOutlet registerAuxOutlet
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
registerAuxOutlet(outlet: RouterOutlet)
|
|
|
|
:markdown
|
|
Register an outlet to notified of auxiliary route changes.
|
|
|
|
You probably don't need to use this unless you're writing a reusable component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#isRouteActive isRouteActive
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
isRouteActive(instruction: Instruction)
|
|
|
|
:markdown
|
|
Given an instruction, returns `true` if the instruction is currently active,
|
|
otherwise `false`.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#config config
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
config(definitions: RouteDefinition[])
|
|
|
|
:markdown
|
|
Dynamically update the routing configuration and trigger a navigation.
|
|
|
|
# Usage
|
|
|
|
```
|
|
router.config([
|
|
{ 'path': '/', 'component': IndexComp },
|
|
{ 'path': '/user/:id', 'component': UserComp },
|
|
]);
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#navigate navigate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
navigate(linkParams: any[])
|
|
|
|
:markdown
|
|
Navigate based on the provided Route Link DSL. It's preferred to navigate with this method
|
|
over `navigateByUrl`.
|
|
|
|
# Usage
|
|
|
|
This method takes an array representing the Route Link DSL:
|
|
```
|
|
['./MyCmp', {param: 3}]
|
|
```
|
|
See the <a href='RouterLink-class.html'><code>RouterLink</code></a> directive for more.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#navigateByUrl navigateByUrl
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
navigateByUrl(url: string, _skipLocationChange?: boolean)
|
|
|
|
:markdown
|
|
Navigate to a URL. Returns a promise that resolves when navigation is complete.
|
|
It's preferred to navigate with `navigate` instead of this method, since URLs are more brittle.
|
|
|
|
If the given URL begins with a `/`, router will navigate absolutely.
|
|
If the given URL does not begin with `/`, the router will navigate relative to this component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#navigateByInstruction navigateByInstruction
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
navigateByInstruction(instruction: Instruction, _skipLocationChange?: boolean)
|
|
|
|
:markdown
|
|
Navigate via the provided instruction. Returns a promise that resolves when navigation is
|
|
complete.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#commit commit
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
commit(instruction: Instruction, _skipLocationChange?: boolean)
|
|
|
|
:markdown
|
|
Updates this router and all descendant routers according to the given instruction
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#subscribe subscribe
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
subscribe(onNext: (value: any) => void)
|
|
|
|
:markdown
|
|
Subscribe to URL updates from the router
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#deactivate deactivate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
deactivate(instruction: Instruction)
|
|
|
|
:markdown
|
|
Removes the contents of this router's outlet and all descendant outlets
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#recognize recognize
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
recognize(url: string)
|
|
|
|
:markdown
|
|
Given a URL, returns an instruction representing the component graph
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#renavigate renavigate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
renavigate()
|
|
|
|
:markdown
|
|
Navigates to either the last URL successfully navigated to, or the last URL requested if the
|
|
router has yet to successfully navigate.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3#generate generate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
generate(linkParams: any[])
|
|
|
|
:markdown
|
|
Generate a URL from a component name and optional map of parameters. The URL is relative to the
|
|
app's base href.
|
|
|
|
|
|
|
|
|
|
|
|
|