I am trying to pass a simple string object from a parent ponent to a sub-child ponent. I have tried doing it the following way:

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/...",ponent: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",ponent: 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");
    }
}

But I am getting a blank page. It looks like the routing configuration in child.ts is not being configured properly. How can I achieve this? I just want to pass some data from parent ponent to sub-child ponent. I re-produced the problem here on plunker

I am trying to pass a simple string object from a parent ponent to a sub-child ponent. I have tried doing it the following way:

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/...",ponent: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",ponent: 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");
    }
}

But I am getting a blank page. It looks like the routing configuration in child.ts is not being configured properly. How can I achieve this? I just want to pass some data from parent ponent to sub-child ponent. I re-produced the problem here on plunker

• javascript
• routes
• angular

1 Answer 1

Usually a service is used for this use case

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

Using Observable or BehaviorSubject with subscribe() might be necessary if there are timing issues, for example when SubChildCmp reads the value before the ParentCmp has set it.

For more details see https://angular.io/docs/ts/latest/cookbook/ponent-munication.html#!#bidirectional-service