將數據傳遞給子組件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