Question

我正在实现Angular Material 7应用程序，当用户导航到导航层次结构的特定部分以显示DashboardComponent时，我希望其中的侧菜单被删除。发生这种情况时，URL的格式为：/ site / {sitename} / dashboard [/ {optionalpagename}]

我尝试过的一种方法如下，它在应用程序中导航时有效，但通过外部链接直接进入仪表板或将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);
      });
  }

路由器激活给定类型的组件时接收通知

1 个答案: