Angular2：使用不同的ID渲染相同的組件

Question

我有一個共同的頂欄，上面有幾個按鈕。 按鈕使用不同的參數路由到同一組件dashboard 。 我想讀取該參數並對儀表板進行更改。
在儀表板上我只是根據從頂欄按鈕傳遞的參數更新iframe的源URL。
一旦儀表板組件第一次加載，當從頂欄單擊按鈕時，不會調用constructor（），ngOnit或ngOnChange。 這是代碼：
app.component.html

    <button md-button  [routerLink]="['/dashboard', 'first']"  id="first" class="top-link">First</button>
    <button md-button  [routerLink]="['/dashboard', 'second']" id="second" class="top-link">second</button>
    <button md-button  [routerLink]="['/dashboard', 'third']" id="third" class="top-link">third</button>

dashboard.component.ts

constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) {
    this.dashboardId = route.snapshot.params['id'];
    console.log("Constructor "+route.snapshot.params['id']);
    this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_url);
  }

  ngOnInit() {
    console.log("OnInit "+this.route.snapshot.params['id']);
    //this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_url);
  }

如何將頂部欄中的按鈕ID傳遞到儀表板組件並刷新頁面？

Answer 1

這是正常行為。 您可以訂閱路由更改並相應地更新組件：

ngOnInit(): void {
    this.changeMeOnUpdate();
}

changeMeOnUpdate(){
    this.sub = this.activatedRoute
        .params
        .subscribe(params => {
            //do what you want with your params and update the component
        }
}