Angular2 Routing - Передача данных из родительского компонента в дочерний компонент

Question

Я пытаюсь передать простой строковый объект из родительского компонента в дочерний компонент. Я попытался сделать это следующим образом:

parent.ts

import {Component} from 'angular2/core'; 
import {Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteConfig} from 'angular2/router'; 
import {ChildCmp} from "./child"; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'app', 
    template:` 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class ParentCmp{ 
    public data = "Some data from parent."; 
    constructor (private _router:Router){ 
     var config = []; 
     if(!this._router.registry.hasRoute("Child",ParentCmp)) 
      config.push({path: "/child/...",component:ChildCmp,name: 'Child',useAsDefault:true, data: {"data": this.data}}); 

     this._router.config(config); 
    } 
} 

bootstrap(ParentCmp,[ 
    ROUTER_PROVIDERS 
]); 

child.ts

import {Component} from 'angular2/core'; 
import {RouteData,Router,ROUTER_DIRECTIVES,RouteConfig} from 'angular2/router'; 
import {SubChildCmp} from "./sub_child"; 

@Component({ 
    selector: 'child', 
    template: `<router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 

]) 
export class ChildCmp{ 
    public data:Object; 
    constructor(private _data:RouteData,private _router:Router){ 

     this.data = this._data.get("data"); 

     var config = []; 
     if(!this._router.registry.hasRoute("SubChild",ChildCmp)) 
      config.push({path:"/sub_child",component: SubChildCmp,name:"SubChild", useAsDefault:true, data:{"data":this.data}}); 

     this._router.config(config); 
    } 
} 

sub_child.ts

import {Component} from 'angular2/core'; 
import {RouteData} from 'angular2/router'; 

@Component({ 
    selector: "sub-child", 
    template: `Data from parent is --> 
    {{data}} 
    ` 
}) 
export class SubChildCmp{ 
    public data:Object; 

    constructor(private _data:RouteData){ 

     this.data = this._data.get("data"); 
    } 
} 

Но я получаю пустую страницу. Похоже, что конфигурация маршрутизации в child.ts не настроена должным образом. Как я могу это достичь? Я просто хочу передать некоторые данные из компонента parent в компонент sub-child. Я вновь произвел проблему here on plunker

Answer 1

Обычно сервис используется для этого случая использования

@Injectable 
export class SharedData { 
    data; 
} 

@Component({ 
    selector: 'app', 
    providers: [SharedData], 
    template:` 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class ParentCmp{ 
    public data = "Some data from parent."; 
    constructor (private _router:Router, private _sharedData:SharedData){ 
     var config = []; 
     if(!this._router.registry.hasRoute("Child",ParentCmp)) 
      _sharedData.data = this.data; 
     } 
    } 
} 

export class SubChildCmp{ 
    public data:Object; 

    constructor(_sharedData:SharedData){ 

     this.data = _sharedData.data; 
    } 
} 

Использование Observable или BehaviorSubject с subscribe() может быть необходимо, если существуют временные например, когда SubChildCmp считывает значение до ParentCmp h как установлено.

Для получения дополнительной информации см. https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service