app.componentでアクティブなルートを取得する方法

Question

app.componentでアクティブなルートを取得したいので、私のアプリのヘッダーにいくつかの要素を隠すことができます。例えば

、ルート/資産であれば、私はこれを行うとき、私はオブジェクトを取得isHeader: boolean = true;

を設定

：

import {Router, ActivatedRoute} from '@angular/router'; 

constructor(router: ActivatedRoute) { 
    this.route = router.url; 
    console.log(this.route); 
} 

私は、ルート値/資産を取得できますか

？

Answer 1

ルータイベントを「リッスン」する必要があります。

作業のデモのための私のplunkerを参照してください：https://plnkr.co/edit/XJmOa7rmtvBpuJDfQ2Vd?p=preview

興味深い部分は、このコードスニペットです：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <a routerLink="/cmp1">cmp1</a><br /> 
    <a routerLink="/cmp2">cmp2</a><br /> 
    <a routerLink="/cmp3">cmp3</a><br /> 

    <router-outlet></router-outlet> 
    `, 
}) 
export class App { 
    name:string; 
    constructor(private _r: Router) { 
    this.name = 'Angular2' 

    this._r.events.subscribe(event => { 
     if (event instanceof RoutesRecognized) { 
     console.log('navigated to:', event.url); 
     console.log('route state', event.state); 
     console.log(''); 
     } 
     else if (event instanceof NavigationEnd) { 
     // if u dont need the state, you could even use this event-type.. 
     } 
    }); 
    } 
} 

は、ルータのイベントに登録し、解雇されたイベントの種類を確認してください。 状態（params、queryParams、...）を使用する場合は、RoutesRecognized -event-typeを使用することをお勧めします。あなただけの現在のurlを取得する場合はNavigationEnd - イベント型を使用することもできます。