如何在 Angular 中将路由事件 URL 绑定到 HTML 模板中答案

【问题标题】：How to bind routing events URL into HTML template in Angular如何在 Angular 中将路由事件 URL 绑定到 HTML 模板中
【发布时间】：2019-09-03 18:44:54
【问题描述】：

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

【问题讨论】：

标签： angular typescript angular2-routing

【解决方案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/ 一个好的开始

【讨论】：

那行不通。我几乎没有修改就实现了 this.pageTitle = this.router.events.pipe(map((event) => { return event instanceof NavigationEnd && event.url.includes('something') ? 'About US' : 'Default Title'; })); 我总是将输出作为 Default Title。
它有效：stackblitz.com/edit/angular-scdiic，我改进了 Observable 映射，但想法保持不变