angular - 根据当前事件路由隐藏根组件html

Question

下图描绘了我使用 Angular 2 开发的 SPA。

顶部显示的菜单链接是根组件的一部分，下面是根组件的html。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" [routerLink]="['']" routerLinkActive="active" >eShop Admin</a>
    </div>
    <ul class="nav navbar-nav">
      <li ><a [routerLink]="['']">Home</a></li>      

      <li><a [routerLink]="['./categories']" routerLinkActive="active">Categories</a></li>
      <li><a [routerLink]="['./products']" routerLinkActive="active">Products</a></li>

      <li><a [routerLink]="['./about']" routerLinkActive="active">About</a></li>
      <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
    </ul>      

  </div>
</nav>

<router-outlet></router-outlet>

现在我的要求是，如果当前事件路由是“登录”，那么根组件中的菜单链接不应该显示。

知道实现这个的最佳方法是什么吗？

Answer 1

我按照以下步骤隐藏/显示基于事件路由的链接

1. 创建了一个服务(AppService)，其 bool 属性“blnDisplayMenu”默认设置为 true。

   import { Injectable , OnInit } from '@angular/core';
   @Injectable()
   export class AppService implements OnInit {
   
      public blnDisplayMenu:boolean;
   
      constructor() { 
       this.blnDisplayMenu = true;
      }
   
      ngOnInit() { }
   }
   

2. 下面是相关的根组件 ts 代码，其中基于值"blnDisplayMenu"，决定是否显示菜单。

    ...
   import { AppService } from './app.service';
   
   blnDisplayMenu:boolean;
   
   constructor(private appService: AppService) { }
   
   ngDoCheck() {        
   this.blnDisplayMenu = this.appService.blnDisplayMenu;        
   }   
   

3. 在应用根组件的html中，根据blnDisplayMenu的值显示菜单

   <nav class="navbar navbar-inverse" *ngIf="blnDisplayMenu">
   

4. 在登录组件中，AppService 的 blnDisplayMenu 属性值在 ngOnInit 中为 false，在 ngDestroy 生命周期 Hook 中为 true。