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

RouterOutletContractlink

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

An interface that defines the contract for developing a component outlet for the Router.

\n\n

See more...

\n
\n \n \n
\n\ninterface RouterOutletContract {\n isActivated: boolean\n component: Object | null\n activatedRouteData: Data\n activatedRoute: ActivatedRoute | null\n activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver): void\n deactivate(): void\n detach(): ComponentRef<unknown>\n attach(ref: ComponentRef<unknown>, activatedRoute: ActivatedRoute): void\n}\n\n\n \n \n\n\n \n \n
\n

Class implementationslink

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

See alsolink

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

Descriptionlink

\n

An outlet acts as a placeholder that Angular dynamically fills based on the current router state.

\n

A router outlet should register itself with the Router via\nChildrenOutletContexts#onChildOutletCreated and unregister with\nChildrenOutletContexts#onChildOutletDestroyed. When the Router identifies a matched Route,\nit looks for a registered outlet in the ChildrenOutletContexts and activates it.

\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
PropertyDescription
\n \n isActivated: boolean\n \n \n

Whether the given outlet is activated.

\n\n

An outlet is considered \"activated\" if it has an active component.

\n\n
\n \n component: Object | null\n \n \n

The instance of the activated component or null if the outlet is not activated.

\n\n \n
\n \n activatedRouteData: Data\n \n \n

The Data of the ActivatedRoute snapshot.

\n\n \n
\n \n activatedRoute: ActivatedRoute | null\n \n \n

The ActivatedRoute for the outlet or null if the outlet is not activated.

\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 activateWith()\n \n link

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

Called by the Router when the outlet should activate (create a component).

\n\n
\n
\n \n\n activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver): void\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
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 \n
\n
\n

\n deactivate()\n \n link

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

A request to destroy the currently activated component.

\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

When a RouteReuseStrategy indicates that an ActivatedRoute should be removed but stored for\nlater re-use rather than destroyed, the Router will call detach instead.

\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 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<unknown>\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

ComponentRef<unknown>

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

This is similar to deactivate, but the activated component should not be destroyed.\nInstead, it is returned so that it can be reattached later via the attach method.

\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<unknown>, activatedRoute: ActivatedRoute): void\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
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" }