Routing Angular2 - przekazywanie danych z komponentu nadrzędnego do komponentu podrzędnego podrzędnego

Question

Próbuję przekazać prosty obiekt typu string z komponentu nadrzędnego do komponentu podrzędnego podrzędnego. Próbowałem robić to w następujący sposób:

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

Ale dostaję pustą stronę. Wygląda na to, że konfiguracja routingu w child.ts nie jest poprawnie skonfigurowana. Jak mogę to osiągnąć? Chcę tylko przekazać pewne dane z komponentu parent do komponentu sub-child. I ponownie produkowane problem here on plunker

Answer 1

Zazwyczaj usługa jest używana dla tego zastosowania przypadku

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

Korzystanie Observable lub BehaviorSubject z subscribe() może być konieczne, jeśli nie są rozrządu problemów, na przykład gdy SubChildCmp odczytuje wartość przed ParentCmp h jak to ustawić.

Aby uzyskać więcej informacji, zobacz