Dynami c архитектура управления навигационным меню - PullRequest
0 голосов
/ 23 апреля 2020

Я пытаюсь найти способ изменить пункт меню навигации в зависимости от того, какой маршрут идет по приложению.

Я получил большинство фрагментов, но я не совсем уверен, когда звонить они и текущий способ, которым я это делаю, теперь имеют его задом наперед, из-за того, как вызываются ловушки и события жизненного цикла и их порядок.

Вот 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;


}

Существуют ли другие события, которые я мог бы использовать, чтобы этот подход заработал?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...