directive
Acts as a placeholder that Angular dynamically fills based on the current router state.
Property | Description |
---|---|
@Output('activate')activateEvents: EventEmitter<any> | |
@Output('deactivate')deactivateEvents: EventEmitter<any> | |
isActivated: boolean | Read-Only |
component: Object | Read-Only |
activatedRoute: ActivatedRoute | Read-Only |
activatedRouteData: Data | Read-Only |
Identifier | Usage |
---|---|
outlet | #myTemplateVar="outlet" |
Each outlet can have a unique name, determined by the optional name
attribute. The name cannot be set or changed dynamically. If not set, default value is "primary".
<router-outlet></router-outlet> <router-outlet name='left'></router-outlet> <router-outlet name='right'></router-outlet>
Named outlets can be the targets of secondary routes. The Route
object for a secondary route has an outlet
property to identify the target outlet:
{path: <base-path>, component: <component>, outlet: <target_outlet_name>}
Using named outlets and secondary routes, you can target multiple outlets in the same RouterLink
directive.
The router keeps track of separate branches in a navigation tree for each named outlet and generates a representation of that tree in the URL. The URL for a secondary route uses the following syntax to specify both the primary and secondary routes at the same time:
http://base-path/primary-route-path(outlet-name:route-path)
A router outlet emits an activate event when a new component is instantiated, and a deactivate event when a component is destroyed.
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
detach() |
---|
Called when the |
attach() | ||||||
---|---|---|---|---|---|---|
Called when the | ||||||
|
ref | ComponentRef | |
activatedRoute | ActivatedRoute |
deactivate() |
---|
|
activateWith() | ||||||
---|---|---|---|---|---|---|
|
activatedRoute | ActivatedRoute | |
resolver | ComponentFactoryResolver |
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/router/RouterOutlet