使用angular2中的動態組件加載器進行雙向數據綁定

Question

我想知道如何與使用angular2.for中的動態組件加載器加載的組件建立雙向數據綁定。

ngAfterViewInit() {
//console.log('Generic Component...' + this.componentName + " Loading");
let componentIndex = this.keysRegister.indexOf(this.componentName);  
this.dcl.loadNextToLocation(this.typesRegister[componentIndex],this.target)
    .then(ref => { 
      ref.instance.componentModel = this.componentModel; 
    });  
console.log('Generic Component...' + this.componentName + " Loaded");
}

因此，如果要在動態加載的組件中更改componentModel，它們也應該在通用組件中反映，反之亦然。 有輸入嗎？

Answer 1

第一： DynamicComponentLoader現在已不推薦用於幾個版本，在下一版本或之后的版本中將為私有。 查看實現並復制它非常簡單。 使用ComponentResolver解析組件 ，這將返回一個工廠， ViewContainer使用該工廠來創建組件。

主要區別在於DynamicComponentLoader使用了您提供的ViewContainerRef ，現在您直接使用ViewContainerRef實例來創建新的組件/模板。

至於你的問題：

首先，讓單獨的2路數據綁定到@Input和@Output 。 我們必須這樣做，因為它們的角度確實不同。

快速解答 ：是的，您需要手動管理輸入和輸出。

為了完全理解為什么我們需要深入研究代碼生成器及其作用，我將盡量保持領先地位，這需要一些時間來處理。

需要記住的注意事項：創建組件時，將獲得ComponentRef的實例，該實例包含對組件實例的引用。

OUTPUT對於輸出，您需要訂閱新創建的組件實例上的每個EventEmitter ，這些EventEmitter是您聲明的@Output屬性，您還需要在適當的時間取消訂閱它們，或者中繼剛剛使用的組件在銷毀發射器時創建為complete()發射器。

輸入對於輸入，您需要偵聽ngDoCheck生命周期掛鈎，並檢查您認為@Input項目是否已更改的每個項目。 另外，如果您想通過屬性將數據傳遞到新組件，則不可能實現，因為您實際上沒有Host元素，您將要創建它...因此，通過以下方式將數據發送到組件：

1. 創建組件時使用新的注入器進行依賴注入
2. 在創建實例后立即在實例上設置值（這與訂閱輸出的方法相同）

現在，這是非常正確的...嗯，這是很多樣板代碼，您可以自動執行重復的代碼...而這正是angular所做的。

使用模板引擎時，組件實際上是一步一步地表示上述所有內容的“幕后”代碼。 它會為您進行所有檢查，所有訂閱和清理等工作……還調用所有生命周期掛鈎，這些掛鈎是您組件中實際的中斷點。 這一切都是可能的，因為angular會解析組件的模板並了解[inputs]和[outputs] ，它也來自通過@Input()和@Output元數據...對於動畫也是如此...

如果您考慮一下，angular是一個HTML到代碼引擎，它將HTML標記與用HTML編寫的代碼指令混合在一起，並從中創建JavaScript代碼。 該代碼使用您的組件實例（與模板匹配），並執行了稱為angular的魔術。