321 lines
4.5 KiB
Plaintext
321 lines
4.5 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href='../router'>angular2/router</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/router/router.js#L9-L232">angular2/src/router/router.js (line 9)</a>
|
|
|
|
:markdown
|
|
# Router
|
|
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 "outlets." 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 recognizes 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
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor(registry:RouteRegistry, pipeline:Pipeline, parent:Router, hostComponent:any)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 activate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
activate(instruction:Instruction)
|
|
|
|
:markdown
|
|
|
|
Recursively activate.
|
|
Calls the "activate" hook on descendant components.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 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 commit
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
commit(instruction:Instruction)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 config
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
config(config:any)
|
|
|
|
:markdown
|
|
|
|
Dynamically update the routing configuration and trigger a navigation.
|
|
|
|
# Usage
|
|
|
|
```
|
|
router.config({ 'path': '/', 'component': IndexCmp});
|
|
```
|
|
|
|
Or:
|
|
|
|
```
|
|
router.config([
|
|
{ 'path': '/', 'component': IndexComp },
|
|
{ 'path': '/user/:id', 'component': UserComp },
|
|
]);
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 deactivate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
deactivate()
|
|
|
|
:markdown
|
|
|
|
Recursively remove all components contained by this router's outlets.
|
|
Calls deactivate hooks on all descendant components
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 generate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
generate(name:string, params:StringMap<string, string>)
|
|
|
|
:markdown
|
|
|
|
Generate a URL from a component name and optional map of parameters. The URL is relative to the app's base href.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 hostComponent
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 lastNavigationAttempt
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 navigate
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
navigate(url:string)
|
|
|
|
:markdown
|
|
|
|
Navigate to a URL. Returns a promise that resolves to the canonical URL for the route.
|
|
|
|
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 navigating
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 parent
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 previousUrl
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 recognize
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
recognize(url:string)
|
|
|
|
:markdown
|
|
|
|
Given a URL, returns an instruction representing the component graph
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 registerOutlet
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
registerOutlet(outlet:RouterOutlet, name: string = 'default')
|
|
|
|
:markdown
|
|
|
|
Register an object to notify of route changes. You probably don't need to use this unless you're writing a reusable component.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 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 subscribe
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
subscribe(onNext)
|
|
|
|
:markdown
|
|
|
|
Subscribe to URL updates from the router
|
|
|
|
|
|
|
|
|
|
|
|
|