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

Question

In my app-root component I have router-outlet in container with some styles. I have route:

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

And I can to get variable in ChildContainer, but I need it in AppRoot. So, from documentation I can get it from child , but if I do this in AppRoot constructor:

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

and console.log(root, child) - child is null, and root contains correct child (invoke property getter). So, how can I get variable in AppRoot?

Answer 1

You may tap into activate event to get reference of instantiated component inside the router outlet.

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

Here is the Plunker!!

Update

expose ActivatedRoute as a public property and once you have the routed component reference, subscribe to data,

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