{ "id": "api/router/RouterOutlet", "title": "RouterOutlet", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

RouterOutletlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Acts as a placeholder that Angular dynamically fills based on the current router state.

\n\n

See more...

\n
\n \n \n \n \n
\n

See alsolink

\n \n
\n\n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Output('activate')
activateEvents: EventEmitter<any>\n 		\n \n \n \n
\n \n @Output('deactivate')
deactivateEvents: EventEmitter<any>\n 		\n \n \n \n
\n \n isActivated: boolean\n Read-Only\n \n \n \n
\n \n component: Object\n Read-Only\n \n \n \n
\n \n activatedRoute: ActivatedRoute\n Read-Only\n \n \n \n
\n \n activatedRouteData: Data\n Read-Only\n \n \n \n
\n
\n\n\n\n \n
\n

Template variable referenceslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IdentifierUsage
outlet#myTemplateVar=\"outlet\"
\n
\n\n\n\n \n
\n

Descriptionlink

\n

Each outlet can have a unique name, determined by the optional name attribute.\nThe name cannot be set or changed dynamically. If not set, default value is \"primary\".

\n\n<router-outlet></router-outlet>\n<router-outlet name='left'></router-outlet>\n<router-outlet name='right'></router-outlet>\n\n

Named outlets can be the targets of secondary routes.\nThe Route object for a secondary route has an outlet property to identify the target outlet:

\n

{path: <base-path>, component: <component>, outlet: <target_outlet_name>}

\n

Using named outlets and secondary routes, you can target multiple outlets in\nthe same RouterLink directive.

\n

The router keeps track of separate branches in a navigation tree for each named outlet and\ngenerates a representation of that tree in the URL.\nThe URL for a secondary route uses the following syntax to specify both the primary and secondary\nroutes at the same time:

\n

http://base-path/primary-route-path(outlet-name:route-path)

\n

A router outlet emits an activate event when a new component is instantiated,\nand a deactivate event when a component is destroyed.

\n\n<router-outlet\n (activate)='onActivate($event)'\n (deactivate)='onDeactivate($event)'></router-outlet>\n\n\n \n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n detach()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Called when the RouteReuseStrategy instructs to detach the subtree

\n\n
\n
\n \n\n detach(): ComponentRef<any>\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

ComponentRef<any>

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n attach()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Called when the RouteReuseStrategy instructs to re-attach a previously detached subtree

\n\n
\n
\n \n\n attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n ref\n ComponentRef\n \n \n
\n \n activatedRoute\n ActivatedRoute\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n deactivate()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n deactivate(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n activateWith()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n activatedRoute\n ActivatedRoute\n \n \n
\n \n resolver\n ComponentFactoryResolver\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n \n \n\n
\n
\n\n\n" }