时间戳

首页 > 解决方案 > 如何将路由事件 URL 绑定到 Angular 中的 HTML 模板

angular - 如何将路由事件 URL 绑定到 Angular 中的 HTML 模板

问题描述

我有一个角度组件，我试图在其中绑定一个基于路由器 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，但在初始加载时未显示该值。

标签： angulartypescriptangular2-routing

解决方案

如果您的 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/以获得良好的开端

推荐阅读