Angular2從app-root的子路由中獲取數據

Question

在我的應用根組件中，我在容器中使用了一些樣式的router-outlet。 我的路線：

{ 
    path: 'some-path', 
    component: ChildContainer, 
    data: { variable:'variable' }, 
} 

，我可以得到變量ChildContainer，但我需要它爲approot。所以，從documentation我可以從child得到它，但如果我這樣做是爲approot構造：

const state: RouterState = router.routerState; 
const root: ActivatedRoute = state.root; 
const child = root.firstChild; 

和console.log(root, child) - 孩子是空的，根含正確的子（調用屬性獲取）。 那麼，如何在AppRoot中獲得variable？

Answer 1

您可以點擊激活事件以獲取路由器插座內的實例化組件的引用。

入住這SO question

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Basic Angular 2</h3> 
    <router-outlet (activate)="onActivate($event)" ></router-outlet> 
    ` 
}) 
export class AppComponent { 
    constructor(){} 

    onActivate(componentRef){ 
    componentRef.sayhello(); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Dashboard</h3> 
    ` 
}) 
export class DashboardComponent { 
    constructor(){} 

    sayhello(){ 
    console.log('hello!!'); 
    } 
} 

這裏是Plunker!!

更新

暴露ActivatedRoute作爲公共財產，一旦你的路由組件引用，訂閱數據，

onActivate(componentRef){ 
    componentRef.route.data.subsribe(data => { 
     console.log(data); 
    }); 
} 

希望這有助於！