Angular 2：智能組件將數據傳遞給Presentation組件

我已經設置了智能組件，ngOnInit使用服務調用Rest API來獲取數據對象。Angular 2：智能組件將數據傳遞給Presentation組件

該數據通過@Input()屬性傳遞給演示文稿（子）組件。

在演示文稿組件中，我需要將數據重新打包到一個不同的模型中，以便它符合我用於演示的第三方組件。

我不是100％如何處理這一事實，在presentatioin組件的ngOnInit，中@Input屬性傳遞仍然是undefined。由於實際數據是一個Rest API調用，父級（智能）組件將只會在subscribe的觀察者中獲得，即異步。

我該如何將它連接在一起，以便我不試圖操縱undefined對象，而是等到它實際上存在於演示文稿組件中？

我想，我總是可以通過@ViewChild將演示組件鏈接到智能父組件，然後在演示組件上引入一個公共方法，如showData(data)，但我想知道最佳做法是什麼。

來源

2017-07-06 user1902183

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter，https://angular.io/guide/lifecycle-hooks#onchanges –

使用ngOnChanges代替 – DeborahK

你能提供你的代碼嗎？看起來你的設置與我的不同。 – hogan

在子組件中，您必須監聽輸入的更改。一旦data輸入已更改並有數據。然後，您可以將其重新包裝到另一個物業。

在此示例中，輸入data被分配到repacked。注意模板中的*ngIf，以防止使用第三方的東西，直到數據準備就緒。

@Component({ 
    selector: 'child', 
    tempalte: '<div *ngIf="repacked"><!-- third-party stuff --></div>' 
}) 
export class ChildComponent implements OnChanges { 
    @Input() 
    public data: Object; 

    public repacked: Object; 

    public ngChanges(changes: SimpleChanges): void { 
     if('data' in changes) { 
      this.repack(changes['data'].currentValue); 
     } 
    } 

    private repack(data: Object) { 
     if(data) { 
      this.repacked = data; // <-- do repacking work here 
     } 
    } 
}

來源

2017-07-07 02:33:45 cgTag

-2

其實在網上已經有相當多的答案了。看看https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

我回顧了你的情況，儘管如果不知道你確實知道你在做什麼，這很難理解。我解決了這個由初始化我在智能組件變量：

private apiData: Array = [];

使用* ngIf在我的模板，然後在孩子重新包裝的數據，如果我有數據：

@Input('apiData') apiData: <any>; 

ngOnInit(): void { 
    this.repack(); 
} 

repack(): void { 
    // here is the part that prevents errors 
    if(! this.apiData) return; 

    // repack logic here 
}

然而@ThinkingMedia在你的情況下，答案可能是更正確的答案。

來源

2017-07-06 23:14:26 hogan

這不起作用。在調用repack（）時你的'apiData'是'undefined'，因爲這個檢查將不會執行任何操作。在那之後，它不會神奇地稱之爲「重新包裝」。 – user1902183

Angular 2：智能組件將數據傳遞給Presentation組件

回答

相關問題