Я пытаюсь найти способ изменить пункт меню навигации в зависимости от того, какой маршрут идет по приложению.
Я получил большинство фрагментов, но я не совсем уверен, когда звонить они и текущий способ, которым я это делаю, теперь имеют его задом наперед, из-за того, как вызываются ловушки и события жизненного цикла и их порядок.
Вот ngOnInit в моем файле app.module.ts:
ngOnInit() {
this.router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
let e = <NavigationEnd>evt;
let parts = e.url.split('/');
let componentName = parts[1];
switch (componentName) {
case "space-details":
case "space-tileset":
case "space-changelists":
console.log('this happens first, thats a problem....');
let id = parts[2];
this.defaultLayoutService.setNavItems('SPACE');
this.defaultLayoutService.setNavItemArgs('DETAILS', ':id', id, "url");
this.defaultLayoutService.setNavItemArgs('TILES', ':id', id, "url");
this.defaultLayoutService.setNavItemArgs('CHANGELISTS', ':id', id, "url");
this.defaultLayoutService.setNavItemArgs('SPACE_NAME', ":name", this.globals.TempData["CurrentEntity"].name, "name");
break;
}
}
if (!(evt instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0);
});
}
setNavItems
меняет мою навигацию. пункты меню в зависимости от того, какой аргумент передается, и setNavItemArgs
динамически изменяют свойства элемента навигации (имя, URL, значки).
Эта часть работает до сих пор. Вот компонент, который соответствует одному из указанных выше маршрутов.
Как видите, я устанавливаю глобальную переменную, на которую я пытаюсь ссылаться в NavigationEnd
. Проблема заключается в том, что приведенный ниже код выполняется после логики навигации c выше.
export class SpaceDetailsComponent implements OnInit {
/** space-details ctor */
constructor(private route: ActivatedRoute,
private router: Router,
private spaceService: SpaceService,
private defaultLayoutService: DefaultLayoutService,
private globals: Globals) {
}
ngOnInit(): void {
this.defaultLayoutService.setHeaderText('Details');
const id = this.route.snapshot.paramMap.get('id');
if (id) {
this.getSpace(id);
}
}
getSpace(id: string) {
this.spaceService.getSpace(id).subscribe({
next: space => {
this.space = space
console.log('this happens after the NavigationEnd event....');
this.globals.TempData["CurrentEntity"] = space;
},
error: err => this.errorMessage = err
});
}
space: Space | null;
errorMessage: string;
}
Существуют ли другие события, которые я мог бы использовать, чтобы этот подход заработал?