Трек Angular2 Текущий маршрут

Question

В моем приложении angular2 у меня есть компонент оболочки с кучей дочерних компонентов, загружаемых через маршрутизацию.

import {Component} from 'angular2/core'; 
import {Router, Route, RouteConfig, Location, ROUTER_DIRECTIVES, OnActivate, ComponentInstruction} from 'angular2/router'; 


import {Home} from './components/home/home'; 
import {About} from './components/about/about'; 
import {RepoBrowser} from './components/repo-browser/repo-browser'; 

@Component({ 
    selector: 'seed-app', 
    providers: [], 
    templateUrl: 'app/seed-app.html', 
    directives: [ROUTER_DIRECTIVES], 
    pipes: [] 
}) 
@RouteConfig([ 
    new Route({ path: '/home', component: Home, name: 'Home', useAsDefault: true }), 
    new Route({ path: '/about', component: About, name: 'About' }), 
    new Route({ path: '/github/...', component: RepoBrowser, name: 'RepoBrowser' }) 
]) 
export class SeedApp implements OnActivate { 
    route: string; 

    constructor(public router: Router) { 
     this.route = this.router.hostComponent.name; 

    } 

    routerOnActivate(next: ComponentInstruction, prev:ComponentInstruction) { 
     console.log('hi'); 

     this.route = next.urlPath; 
    } 

} 

То, что я пытаюсь сделать, - это отслеживать на этом уровне компонента текущий выбранный маршрут. Как вы можете видеть в моем конструкторе, я попытался получить this.router.hostComponent.name, но это просто возвращает SeedApp.

Я также попытался использовать функцию routerOnActivate, чтобы получить ту, на которую мы переходим, но это никогда не вызывается.

Answer 1

1) Вы можете подписаться на маршрутизатор и узнать текущий маршрут маршрута маршрутизатора. В качестве родительского компонента или компонента, который содержит route.config как это,

export class SeedApp implements OnActivate { 
constructor(router:Router) 
    { 
     this.router=router; 
     this.router.subscribe((nextValue) => { 
      console.log(nextValue); 
     }); 
    ...  
    } 
.. 
} 

---

2) до определенного уровня маршрута/компонента, используя CanActive крючок, как это,

import {CanActivate,OnActivate} from 'angular2/router'; 

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) => { 
    console.log(next); 
    return true; 
}) 
export class About { 
}