Question

我有一个角度组件，试图在其中绑定基于路由器URL的公共变量。该公共变量在subscription方法内分配了一个值，因此，由于此模板在初始加载时不会更新。

  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/是一个好的开始

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

1 个答案: