Routing Angular2 - Passaggio dei dati dal componente principale a un componente secondario secondario

Question

Sto provando a passare un oggetto stringa semplice da un componente padre a un componente secondario. Ho provato a farlo nel modo seguente:

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"); 
    } 
} 

Ma sto ottenendo una pagina vuota. Sembra che la configurazione del routing in child.ts non sia configurata correttamente. Come posso raggiungere questo obiettivo? Voglio solo passare alcuni dati dal componente parent al componente sub-child. I ri-prodotto il problema here on plunker

Answer 1

solito un servizio viene utilizzato per questo caso di utilizzo

@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; 
    } 
} 

Uso Observable o BehaviorSubject con subscribe() potrebbe essere necessaria se ci sono i tempi problemi, ad esempio quando SubChildCmp legge il valore prima dello ParentCmp h come stabilito.

Per ulteriori dettagli, vedere https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service