我有一個父組件，它通過服務從服務器獲取數據。我需要將這些數據傳遞給子組件。Angular 2 - 在父初始化後將數據傳遞給子組件
我一直試圖通過這個數據與通常的@Input()然而，因爲我預計我在兒童組件中獲得的數據是undefined。
例
父組件
@Component({
selector: 'test-parent',
template: `
<test-child [childData]="data"></test-child>
`
})
export class ParentComponent implements OnInit {
data: any;
ngOnInit() {
this.getData();
}
getData() {
// calling service and getting data
this.testService.getData()
.subscribe(res => {
this.data = res;
});
}
}
輔元件
@Component({
selector: 'test-child',
template: `
<!-- Content for child.... -->
`
})
export class ChildComponent implements OnInit {
@Input() childData: any;
ngOnInit() {
console.log(childData); // logs undefined
}
}
我保持簡單，以顯示我想要的例子做。我的問題是初始化之後是否有可能將數據傳遞給孩子。我不確定，但在這種情況下雙向數據綁定會有幫助嗎？
更多的調查
繼公佈答案，我已經使用ngOnChanges生命週期掛鉤嘗試。我遇到的問題是當數據更新時ngOnChanges函數未被觸發。數據是一個對象，這就是爲什麼我認爲變化沒有被檢測到。在子組件
@Component({
selector: 'test-child',
template: `
<!-- Content for child.... -->
`
})
export class ChildComponent implements OnChanges {
@Input() childData: any;
ngOnChanges() {
console.log(childData); // logs undefined
}
}
更新後的代碼我試着從團隊角度展示了生命週期掛鉤Plunker的活生生的實例進行測試。在測試中，我更新了OnChangesComponent來傳遞一個對象，正如在更新對象時可以看到的，ngOnChanges沒有檢測到這個變化。 （這也是在這個question所示）
https://plnkr.co/edit/KkqwpsYKXmRAx5DK4cnV
似乎ngDoCheck可以幫助解決這個問題，但在我看來，作爲每一個變化是由該檢測它不會幫助，從長遠來看錶現生命週期鉤子。
而且我知道，我大概可以使用@ViewChild()訪問子組件，並設置我需要的變量，但我不認爲這個用例它使多大意義。
發佈更多的代碼，以幫助更好地解釋
父組件
@Component({
selector: 'test-parent',
template: `
<test-child [childType]="numbers" [childData]="data" (pickItem)="pickNumber($event)">
<template let-number>
<span class="number" [class.is-picked]="number.isPicked">
{{ number.number }}
</span>
</template>
</test-child>
<test-child [childType]="letters" [childData]="data" (pickItem)="pickLetter($event)">
<template let-letter>
<span class="letter" [class.is-picked]="letter.isPicked">
{{ letter.displayName }}
</span>
</template>
</test-child>
<button (click)="submitSelections()">Submit Selection</button>
`
})
export class ParentComponent implements OnInit {
data: any;
numbersData: any;
lettersData: any;
ngOnInit() {
this.getData();
}
getData() {
// calling service and getting data for the game selections
this.testService.getData()
.subscribe(res => {
this.data = res;
setChildData(this.data);
});
}
setChildData(data: any) {
for(let i = 0; i < data.sections.length; i++) {
if(data.sections[i].type === 'numbers') {
this.numbersData = data.sections[i];
}
if(data.sections[i].type === 'letters') {
this.lettersData = data.sections[i];
}
}
}
pickNumber(pickedNumbers: any[]) {
this.pickedNumbers = pickedNumbers;
}
pickLetter(pickedLetters: any[]) {
this.pickedLetters = pickedLetters;
}
submitSelections() {
// call service to submit selections
}
}
輔元件
@Component({
selector: 'test-child',
template: `
<!--
Content for child...
Showing list of items for selection, on click item is selected
-->
`
})
export class ChildComponent implements OnInit {
@Input() childData: any;
@Output() onSelection = new EventEmitter<Selection>;
pickedItems: any[];
// used for click event
pickItem(item: any) {
this.pickedItems.push(item.number);
this.onSelection.emit(this.pickedItems);
}
}
這或多或少是我的代碼。基本上我有一個父處理子組件的選擇，然後我將這些選擇提交給服務。我需要將某些數據傳遞給孩子，因爲我試圖讓孩子以服務期望的格式返回對象。這將幫助我不要在父組件中創建服務期望的整個對象。此外，它會讓孩子重複使用，因爲它會發回服務期望的內容。
更新
我明白，用戶仍然張貼在這個問題的答案。請注意，上面發佈的代碼適用於我。我遇到的問題是，在一個特定的模板中，我輸入了一個導致數據爲undefined的錯字。
希望，它的證明是有用的:)
傳遞感謝您的回答，這似乎指向了我正確的方向。現在唯一的問題是，如果數據是一個「簡單」字符串，那麼'ngOnChanges'正在檢測變化，但是如果它是一個對象，出於某種原因它將保持'undefined'。 –
@DanielGrima：更新了答案。 –
再次感謝您的幫助......我剛剛發現問題所在。在我的模板變量中有一個錯字，所以當然總是未定義。之前沒有意識到！至少它看起來像是在工作，顯然我不需要任何'ngOnChanges'或getter對象..現在看起來沒問題。 –