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

Question

在我的 app-root 组件中，我在容器中有一些样式的router-outlet 。 我有路线：

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

我可以在 ChildContainer 中获取变量，但我需要在 AppRoot 中使用它。 因此，从文档中我可以从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

您可以点击激活事件以获取路由器插座内实例化组件的引用。

检查这个问题

@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!!');
  }
}

这里是普朗克！！

更新

将ActivatedRoute作为公共属性公开，一旦获得路由组件引用，就可以订阅数据，

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