Track 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）您可以訂閱路由器，並且可以知道路由器路由到的當前路由。在使用CanActive鉤這樣父組件或包含route.config這樣的組件，

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

---

2）以特定的路線/組件級別，

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

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