将数据传递给子组件angular2（从Web服务接收的数据不附加在子上）

Question

我试图在服务加载后分配数据以便更好地理解观察代码。

服务

getcampaigndata(slug: any): Promise<any> { 

      return this.http 
       .get('service url'+slug) 
       .toPromise() 
       .then((res) => res.json()) 
       .catch(this.handleError); 
      } 

父母组件

public slug: string; 
    public data: any = {}; 

    this.campaign.getcampaigndata(this.slug).subscribe(params => { 
       this.data = params; 
      }); 

辅元件

import {CampaignComponent} from '../../campaign.component'; 

constructor(private shared: SharedService,private route:ActivatedRoute,public campaign: CampaignComponent) { }; 

ngOnInit(){ 
      console.log(this.campaign.slug); 
      console.log(this.campaign.data); 
    } 

**Output** : 
SLUG 
Object{} 

正如你可以看到我有进口CampaignComponet其工作很好的团状的Cuz slug是在运行时指定另一个组件但是data它不是因为http请求的分配。任何人都有这个解决方案？

使用this.data=JSON.parse(localStorage.getItem('currentCampaig‌​n')); instand web服务的正常工作

Answer 1

使用@Input装饰将数据传递给你的孩子组件

<child-component [myData]="data"></child-component> 

而在ChildComponent

export class ChildComponent { 
    @Input() myData; 
} 

而且当ngOnInit()是称为您传递的数据尚未结合。所以你需要另一个生命周期事件ngOnChanges()或ngAfterViewInit()。

Answer 2

您也可以参考以下链接这也解释了不同的方式：

https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

Answer 3

是最后我有这样做的正确sollution。

我们首先创建一个基本组件，稍后将嵌套在另一个组件中。该组件具有我们在模板中使用标题属性：

@Component({ 
    selector: 'child-selector', 
    template: 'child.component.html' 
}) 
export class ChildComponent { 
    title = 'I\'m a nested component'; 
} 

的child.component.html仅仅是一个HTML文件，该文件显示标题属性的值：

/* child.conponent.html */ 
<h2>{{title}}</h2> 

现在，我们希望创建一个容器组件。它看起来几乎与嵌套组件相同，除了我们必须指定我们想要使用嵌套组件。我们通过将ChildComponent添加到Component装饰器的指令属性来完成此操作。如果不这样做，则不能使用ChildComponent。

/* parent.component.html */ 
<div> 
    <h1>I'm a container component</h1> 
    <child-selector></child-selector> 
</div> 

将数据传递到一个嵌套组件

如果嵌套组件想从它的容器接收输入：

@Component({ 
    selector: 'parent-selector', 
    template: 'parent.component.html', 
    directives: [ChildComponent] 
}) 
export class ParentComponent { } 

的容器组件通过指定其指示在模板使用嵌套组件它必须向该容器公开一个属性。嵌套组件公开了一个属性，它可以使用@Input装饰器从它的容器接收输入。

我们使用输入装饰器来修饰嵌套组件类中的任何属性。这适用于每种属性类型，包括对象。在我们的例子中，我们将传递一个字符串值，以嵌套组件的title属性，所以我们将庆祝与@input装饰，物业：

@Component({ 
    selector: 'child-selector', 
    template: 'child.component.html' 
}) 
export class ChildComponent { 
    @Input() title:string; 
} 

现在我们的嵌套的组件已准备好从其父接收输入零件。

在容器组件中，我们需要定义我们想要传递给嵌套组件的属性。我们叫它childTitle：

@Component({ 
    selector: 'parent-selector', 
    template: 'parent.component.html', 
    directives: [ChildComponent] 
}) 
export class ParentComponent { 

    childTitle:string = 'This text is passed to child'; 

// you can assign data through web service also . 
} 

现在容器组件应该childTitle的值通过设置该属性传递给嵌套的组件与属性的绑定。当使用属性绑定时，我们将绑定目标放在方括号中。绑定目标是指嵌套组件的title属性。我们将绑定源设置为容器想要传递给嵌套组件的数据，该嵌套组件是childTitle。

/* parent.component.html */ 
<div> 
    <h1>I'm a container component</h1> 
    <child-selector [title]='childTitle'></child-selector> 
</div> 

我们可以指定一个嵌套组件的属性的属性绑定目标的唯一时间是当该属性与@input装饰装饰，就像我们先前做的。

当我们运行我们的代码，我们应该看到在嵌套组件的H2元素

OUTPUT : 
I'm a container component 
This text is passed to child