angular2如何隱藏父路由器鏈接

Question

在angular2中，我需要找到隱藏父路由器鏈接的方法。我必須只顯示最低級別的信息 - 不是使我達到這個級別的路由鏈路樹。

我正在使用Angular 2.0 final。 我沒有使用angular-cli，我無法切換到它。 我所有的代碼包含在此普拉克：http://plnkr.co/edit/EdLY62A8GfVimEn48HaA

用戶點擊後，「關於」 routerLink，我必須只顯示 「關於內容」，並隱藏「家庭」和「關於」 routerLinks

。

對於'About'可能存在的任何子路由，相同的要求適用。在路由樹中的任何點，我必須僅顯示該級別的選擇 - 所有使我到此點的父路由鏈接絕不能如下所示：

應用程序組件：

import { Component } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'demo-app', 
 
    template: ` 
 
    <a [routerLink]="['/']">Home</a> 
 
    <a [routerLink]="['/about']">About</a> 
 
    <div class="outer-outlet"> 
 
    <router-outlet></router-outlet> 
 
    </div> 
 
    ` 
 
}) 
 
export class AppComponent { }

Answer 1

隱藏和顯示根據我們目前的航線上的具體環節，我們需要：

知道我們現在的路線

// Router contains our current path 
    import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router'; 

聽路由變化，得到當前路徑並更新鏈接

constructor(private router: Router) { 

     router.events.subscribe((event: NavigationEvent) => { 
     if (event instanceof NavigationStart) { 
      let activeRoute: string = event.url; 
      // Now that we know the path 
      // we can determine which links to hide 
     } 
     }); 

    } 

More navigation events

這裏有一個demo