每当对象内容发生变化时，角度触发 EventEmitter答案

【问题标题】：Angular trigger EventEmitter whenever object contents is changed每当对象内容发生变化时，角度触发 EventEmitter
【发布时间】：2018-03-30 09:30:01
【问题描述】：

我正在使用一个子组件来构建一个由递归子数组和对象组成的复杂对象。我想要一种方法来使用实时绑定访问父组件中的这个对象。

对象中的值会根据用户输入（选择框、输入等）而变化，因此我需要一种方法来发出 @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>

【问题讨论】：

您可以在输入更改时发出事件发射器<input [(ngModel)]="complexObj.lines[0].data" (change)="emitEmitter()"></input>
感谢您的建议。表格比说明的要复杂一些，有很多潜在的输入。不得不对每个输入进行更改检测，这将是一种耻辱。有没有其他办法？

标签： javascript angular output components eventemitter

【解决方案1】：

您可以使用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)
    }
});

这将在数据有效时发出值，并且在上面的代码中，无论值是对还是错都会触发事件。

【讨论】：

感谢您的建议。我要试试看。子组件实际上由一堆递归组成，子组件创建相同类型的子组件等。有没有什么好的方法可以有条件地将顶级组件包装在
标签中，这样我就可以访问所有可能的子输入？
例如子模板可能有：（并以这种方式递归创建更多输入），如果我将整个东西包装在一个表单标签中，我将有嵌套表单
这不适用于嵌套组件？因为 ngForm 也无法从嵌套输入中获取值。