如何在 Angular 中將路由事件 URL 綁定到 HTML 模板中

Question

我有一個角度組件，我試圖在其中綁定基於路由器 URL 的公共變量。 公共變量在 subscribe 方法中分配了一個值，因此模板不會在初始加載時更新。

  pageTitle: string;
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
          if(event.url ==="something" {
             this.pageTitle ="About US"
            }
         }
  })
}

我在 HTML 文件中綁定pageTitle變量

<div class="title">{{pageTitle}}</div>

刷新頁面時，我可以看到 pageTitle，但在初始加載時未顯示該值。

Answer 1

如果您的 pageTitle 更改，您應該嘗試使其可觀察並使用async管道處理以使其保持最新狀態

添加了 Stackblitz 實現： https ://stackblitz.com/edit/angular-scdiic

嘗試這樣的事情

    this.title = this.route.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map((event: NavigationEnd) => event.url));

<div class="title">{{pageTitle | async}}</div>

也為了更好地了解更改檢測如何在 Angular 中工作，如下所示： https : //auth0.com/blog/understanding-angular-2-change-detection/一個良好的開端