Как получить активный маршрут в 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. но вы можете даже использовать NavigationEnd -event-type, если хотите только получить текущий url ..