javascript - Angular2 Routing - Passing data from parent component to a sub-child component - Stack Overflow

admin管理员组

文章数量:1419216

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

Share Improve this question Follow asked May 3, 2016 at 6:27 EesaEesa 2,85922 gold badges3737 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptAngular2 RoutingPassing data from parent component to a subchild componentStack Overflow