Question

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

post 顶部显示的菜单链接是根组件的一部分，下面是根组件的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

我按照以下步骤隐藏/显示基于活动路线的链接

创建一个服务（AppService），默认情况下布尔属性“blnDisplayMenu”设置为true。

import { Injectable , OnInit } from '@angular/core';
@Injectable()
export class AppService implements OnInit {

   public blnDisplayMenu:boolean;

   constructor() { 
    this.blnDisplayMenu = true;
   }

   ngOnInit() { }
}

以下是基于值的相关根组件ts代码 “blnDisplayMenu”，决定是否显示菜单。

 ...
import { AppService } from './app.service';

blnDisplayMenu:boolean;

constructor(private appService: AppService) { }

ngDoCheck() {        
this.blnDisplayMenu = this.appService.blnDisplayMenu;        
}

在app根组件的html中，菜单根据blnDisplayMenu的值显示
```
<nav class="navbar navbar-inverse" *ngIf="blnDisplayMenu">
```
在登录组件中，AppService的blnDisplayMenu属性值在ngOnInit中为false，在ngDestroy生命周期钩子中为true。

Answer 2

您可以收听ActivatedRoute.url属性（Observable）并在<ul class="nav navbar-nav">上使用异步* ngIf

示例：

class {
    isLoginPath$: Observable<Boolean> = this.route.url.map(url => url[0].path).map(path => path === 'login');

    constructor(private route: ActivatedRoute) {}
}

然后，在你的html中，你可以拥有：

<ul class="nav navbar-nav" *ngIf='!(isLoginPath$ | async)'>

使用此方法，您可以将路径内的url observable映射到可观察的true或false，具体取决于您的路线。由于异步管道，它应根据observable发出的最后一个事件自动显示或隐藏元素。

有关ActivatedRoute官方文档的更多信息：https://angular.io/docs/ts/latest/guide/router.html#!#activated-route

根据当前活动路由隐藏根组件html

2 个答案: