如何檢測路由更改和Angular中的新視圖替換

Question

我期待檢測路線何時更改並更換新視圖（html）。

嘗試下面的代碼，但不知道如何進一步。

this._routerSub = this.router.events
  .filter(event => event instanceof NavigationEnd)
  //.do(event => console.log(event)) // 
  .subscribe((value) => { });

也嘗試下面的代碼，但得到錯誤

Event類型的參數不能分配給'（value：Event）=> void'類型的參數。

   import { Router, NavigationEnd, Event  } from '@angular/router';

   this._routerSub = this.router.events  
      .subscribe(event : Event) => {
      if (event instanceof NavigationEnd) {
        console.log(event.url);
      }
    });

下面的Vega是我的app.component.ts和app.component.ts代碼。 是不是假設在激活時調用onActivate。 由於路由器插座將在實例化新組件時發出激活事件。

app.component.html

<router-outlet (activate)="onActivate($event)" ></router-outlet>

app.component.ts

   onActivate(e) {
        debugger;
        console.log(1);
      }

Answer 1

如何使用router-outlet暴露activate事件：

<router-outlet (activate)="onActivate($event)"></router-outlet>

onActivate(e) {
  console.log(e.constructor.name);
  //etc... you can access to a lot of other information
}