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包含正确的子句（invoke property 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);
    });
}

希望这会有所帮助!!

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

1 个答案: