Angular 路线更改后面包屑并不总是更新

Question

我有一个 Angular 8.2 应用程序，它带有仪表板和 link 应用程序的其他部分。当有人点击某个部分 link 说 'Data Management' 时，该部分名称会显示在导航栏中。出于某种原因，即使正在更新使用的变量，在单击各自的 link 后，两个部分的名称也不会显示在导航栏中。

这是我在导航栏组件中设置面包屑名称的代码：

ngOnInit(): void {
        this._routerSubscription = this.router.events
            .pipe(
                filter((event: any) => event instanceof NavigationEnd),
                distinctUntilChanged()
            )
            .subscribe((navigationEnd: NavigationEnd) => {
                const root: ActivatedRoute = this.activatedRoute.root;
                this.getLoadedAppName(root);
                this.cdr.markForCheck(); // needed to manually trigger change detection
            });
    }
public getLoadedAppName(route: ActivatedRoute) {
        if (route.firstChild.snapshot.firstChild.data['breadcrumb']) {
            this.currentloadedapp = route.firstChild.snapshot.firstChild.data['breadcrumb'];
            console.log('currentloadedapp has changed to ' + this.currentloadedapp);
        } else {
            this.currentloadedapp = '';
            console.log('currentloadedapp has no value');
        }
    }

当我从仪表板转到这两个部分时，即使代码到达 'currentloadedapp has changed to...' 的 console.log 行，面包屑名称也不会显示，但是当我从一个部分转到面包屑显示的这些部分之一的部分。我想不通。当我导航到一个新部分时，ngOnInit 总是会触发。我需要使用不同的生命周期钩子吗？

更新这是我的导航栏组件 html，其中显示面包屑名称：

<header class="app-header">
  <nav class="navbar navbar-expand-lg fixed-top navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand p-1" [routerLink]="['/dashboard']">
      <img class="icon" src="img/logo_white.png" alt="logo" />
    </a>
    <div class="app-title">
      <h1>{{ currentloadedapp }}</h1>
    </div>   
    <ul class="navbar-nav flex-row mr-4">
      ...
    </ul>
  </nav>
</header>

Answer 1

我想出了解决办法。在设置 currentloadedapp 变量后，我在订阅函数中添加了一个 markForCheck 。它与订阅功能有关。我从这个 post 得到了解决方案：。我没有弄清楚的是为什么在导航到某些部分而不是其他部分时视图得到更新。重要的是面包屑现在始终显示。

Angular 路线更改后面包屑并不总是更新

breadcrumb not always updating after Angular route changes

angular

angular-router