Docs4dev
Docs
angular / 12 / api / router / routeroutletcontract.html

RouterOutletContract

interface

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

See more...

interface RouterOutletContract {
  isActivated: boolean
  component: Object | null
  activatedRouteData: Data
  activatedRoute: ActivatedRoute | null
  activateEvents?: EventEmitter<unknown>
  deactivateEvents?: EventEmitter<unknown>
  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver): void
  deactivate(): void
  detach(): ComponentRef<unknown>
  attach(ref: ComponentRef<unknown>, activatedRoute: ActivatedRoute): void
}

Class implementations

See also

Description

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

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

Properties

Property Description
isActivated: boolean

Whether the given outlet is activated.

An outlet is considered "activated" if it has an active component.
component: Object | null

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

The Data of the ActivatedRoute snapshot.
activatedRoute: ActivatedRoute | null

The ActivatedRoute for the outlet or null if the outlet is not activated.
activateEvents?: EventEmitter<unknown>

Emits an activate event when a new component is instantiated
deactivateEvents?: EventEmitter<unknown>

Emits a deactivate event when a component is destroyed.

Methods

activateWith()

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

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver): void

Parameters
activatedRoute ActivatedRoute
resolver ComponentFactoryResolver
Returns

void
deactivate()

A request to destroy the currently activated component.

deactivate(): void

Parameters

There are no parameters.

Returns

void

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

Called when the RouteReuseStrategy instructs to detach the subtree.

detach(): ComponentRef<unknown>

Parameters

There are no parameters.

Returns

ComponentRef<unknown>

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

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

attach(ref: ComponentRef<unknown>, activatedRoute: ActivatedRoute): void

Parameters
ref ComponentRef
activatedRoute ActivatedRoute
Returns

void

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/router/RouterOutletContract