У меня есть приложение Angular 8.2 с приборной панелью и ссылками на другие разделы приложения. Когда человек нажимает на ссылку раздела, скажем «Управление данными», название раздела отображается на панели навигации. По какой-то причине названия двух разделов не отображаются в панели навигации после нажатия на соответствующие ссылки, даже если используемая переменная обновляется.
Вот мой код в компоненте navbar, который задает имя хлебной крошки:
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 компонент navbar, где отображается имя хлебной крошки:
<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>