Docs4dev
Docs
angular / 4 / api / router / routeroutlet.html

RouterOutlet

directive

npm Package @angular/router
Module import { RouterOutlet } from '@angular/router';
Source router/src/directives/router_outlet.ts
NgModule RouterModule

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

Overview

@Directive({ selector: 'router-outlet', exportAs: 'outlet' })
class RouterOutlet implements OnDestroy, OnInit {
  activateEvents: new EventEmitter<any>()
  deactivateEvents: new EventEmitter<any>()
  ngOnDestroy(): void
  ngOnInit(): void
  get locationInjector: Injector
  get locationFactoryResolver: ComponentFactoryResolver
  get isActivated: boolean
  get component: Object
  get activatedRoute: ActivatedRoute
  get activatedRouteData
  detach(): ComponentRef<any>
  attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute)
  deactivate(): void
  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null)
}

How To Use

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

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.

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

Selectors

router-outlet

Outputs

activate bound to RouterOutlet.activateEvents
deactivate bound to RouterOutlet.deactivateEvents

Exported as

outlet

Constructor

constructor(parentContexts: ChildrenOutletContexts, location: ViewContainerRef, resolver: ComponentFactoryResolver, name: string, changeDetector: ChangeDetectorRef)

Members

activateEvents: new EventEmitter<any>()

deactivateEvents: new EventEmitter<any>()

ngOnDestroy(): void

ngOnInit(): void

get locationInjector: Injector

get locationFactoryResolver: ComponentFactoryResolver

get isActivated: boolean

get component: Object

get activatedRoute: ActivatedRoute

get activatedRouteData

detach(): ComponentRef<any>

Called when the RouteReuseStrategy instructs to detach the subtree

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

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

deactivate(): void

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null)

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v4.angular.io/api/router/RouterOutlet