每當對象內容發生變化時，角度觸發器EventEmitter

我正在使用子組件來構建由遞歸子數組和對象組成的複雜對象。我想要一種方法來使用活動綁定來訪問父組件中的這個對象。每當對象內容發生變化時，角度觸發器EventEmitter

對象內的值基於用戶輸入（選擇框，輸入等）而改變，所以我需要一種方法來發送@Output（）EventEmitter，並且每當一個屬性更改時傳遞整個對象。

關於如何實現這一點的任何想法或者是否有我可以採取的另一條路線？

請參閱下面的一些概念代碼，其中輸入具有雙向數據綁定到複雜對象中的深層值，並且我需要通過以某種方式檢測更改來將此更改發送給父代。

實際的形式更復雜，所以我想避免使用特定的事件，例如觀察每個輸入的變化，以便在可能的情況下手動觸發事件發射器。

父模板：

<child-component (emitter)="emitterHandler($event)"></child-component>

父組件：

emitterHandler(obj){ console.log(obj); }

子組件：

@Output() emitter: EventEmitter<any> = new EventEmitter();  
complexObj = {data: 'test', lines: [{data: 'asd', time: 123},{data: 'xcv', time: 233}]};

子模板：

<input [(ngModel)]="complexObj.lines[0].data"></input>

來源

2017-10-18 NJ.

您可以針對您的輸入變更發出eventemitter'' – JayDeeEss

感謝您的建議。這種形式比有很多潛在投入的說明要複雜一些。必須使用每個輸入的變化檢測將是一個恥辱。有沒有其他方法？ –

您可以使用valueChanges的NgForm：

組件

@ViewChild('myForm') myForm: NgForm; 

// this will be called when any input inside the form changes 
this.myForm.valueChanges.subscribe(val => { 
    // emit the event 
});

模板

<form #myForm='ngForm' ...> 
    // your select , input or nany form elements 
</form>

上面的代碼模板驅動的形式，

下面是文章爲該數據驅動形式： https://alligator.io/angular/reactive-forms-valuechanges/

尼斯的路要走是：

this.myForm.statusChanges.subscribe(res => { 
    if (res === 'VALID') { 
     // emit(this.myForm.values) 
    } 
});

時的數據是有效這會發出值，並在上面的代碼中，無論值是正確的或錯誤它會引發事件。

來源

2017-10-18 13:39:29

感謝您的建議。我會嘗試一下。子組件實際上由一堆遞歸組成，並且子組件創建相同類型的子組件。無論如何，有條件地將頂級組件包裝在

標籤中，這樣我就可以訪問所有可能的子輸入了嗎？ –

例如子模板可能有：（並以這種方式遞歸地創建更多輸入），如果我將整個東西包裝在窗體標記中，我將嵌套窗體 –

這不會在嵌套組件上工作？因爲ngForm也無法從嵌套輸入中獲取值。 –

每當對象內容發生變化時，角度觸發器EventEmitter

回答

相關問題