Angular2从app-root中的子路由获取数据

Question

在我的 app-root 组件中，我在容器中有 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) - child 为 null，并且 root 包含正确的 child（调用属性 getter）。 那么，如何在 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);
    });
}