Question

我有一个带有仪表板的Angular 8.2应用程序，并链接到该应用程序的其他部分。当某人单击一个节链接时说“数据管理”，该节名称将显示在导航栏中。由于某些原因，即使正在使用的变量正在更新，两个节的名称在单击它们各自的链接后也不会显示在导航栏中。

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

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');
        }
    }

当我从仪表板转到这两个部分时，即使代码进入console.log行，“ currentloadedapp已更改为...”，面包屑名称也不会显示，但是当我从一个转到面包屑显示的这些部分之一。我不知道。导航到新部分时，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。它与订阅功能有关。我从这篇文章中获得了解决方案：https://stackoverflow.com/a/40707669/2026659。我没有弄清楚的是为什么导航到某些部分而不是其他部分时视图已更新。重要的是，面包屑现在始终显示。

面包屑并不总是在角度路线更改后更新

1 个答案: