Получать уведомления, когда компонент данного типа активирован маршрутизатором

Question

Я реализую приложение Angular Material 7, в котором я хочу, чтобы боковое меню было удалено, когда пользователь переходит к определенной части иерархии навигации для отображения DashboardComponent. Когда это происходит, URL имеет вид: / site / {sitename} / dashboard [/ {optionpagename}]

Один из способов, который я попробовал, заключается в следующем, и он работает при навигации по приложению, но не при переходе непосредственно к панели мониторинга по внешней ссылке или вставке URL-адреса в браузер:

ngOnInit(){
    this.router.events
      .pipe(
        filter(event=> event instanceof ActivationEnd && (event as ActivationEnd).snapshot.component != null  ),
        map((event:ActivationEnd)=>{
          let component = event.snapshot.component;
          return typeof event.snapshot.component === 'string' ? component : (component as any).name;
        }),
        untilDestroyed(this)
      )
      .subscribe((s: string) => {
        switch (s) {
          case 'DashboardComponent':
            console.log('Hiding main menu');
            this.hideMainMenu = true;
            break;
          case 'SiteComponent':
          case 'AboutComponent':
          case 'HomeComponent':
          case 'LoginComponent':
            console.log('Showing main menu');
            this.hideMainMenu = false;
            break;
        }
      });
}

У меня есть рабочее решение, которое я опубликую в качестве ответа ниже, но я не совсем доволен им, поскольку оно кажется хрупким.

Это похоже на довольно распространенный вариант использования, поэтому мне интересно, не хватает ли мне более чистого способа достижения этого?

Answer 1

Вот мое рабочее решение.Мне это не особо нравится, так как оно сломается, если схема URL изменится.Но, может быть, я привередлива.

  private ngOnInit()
  {
    let regex = new RegExp("/site/[a-z0-9_]+/dashboard");
    this.router.events
      .pipe(
        filter(event=> event instanceof ActivationEnd || event instanceof RouteConfigLoadEnd ),      
        untilDestroyed(this)
      )
      .subscribe((s: any) => {
        console.log("current url:",this.router.url);
        this.hideMainMenu = regex.test(this.router.url);
        console.log("hideMainMenu", this.hideMainMenu);
      });
  }