首页 > 代码库 > [Angular] Router outlet events

[Angular] Router outlet events

For example, we have a component which just simply render router-outlet:

import { Component } from @angular/core;@Component({  selector: mail-app,  styleUrls: [mail-app.component.scss],  template: `    <div class="mail">      <router-outlet></router-outlet>    </div>  `})export class MailAppComponent {}
export const ROUTES: Routes = [  { path: folder/:name, component: MailFolderComponent }];

 

We can add events to router-outlet:

import { Component } from @angular/core;@Component({  selector: mail-app,  styleUrls: [mail-app.component.scss],  template: `    <div class="mail">      <router-outlet        (activate)="onActivate($event)"        (deactivate)="onDeactivate($event)"      ></router-outlet>    </div>  `})export class MailAppComponent {  onActivate(event) {    console.log(event)  }  onDeactivate(event) {    console.log(event)  }}

 

When we log out the, we see the actual component been rendered into the router-outlet.

技术分享

[Angular] Router outlet events