每当对象内容发生变化时，角度触发器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>

您可以针对您的输入变更发出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) 
    } 
});

时的数据是有效这会发出值，并在上面的代码中，无论值是正确的或错误它会引发事件。

感谢您的建议。我会尝试一下。子组件实际上由一堆递归组成，并且子组件创建相同类型的子组件。无论如何，有条件地将*组件包装在

标签中，这样我就可以访问所有可能的子输入了吗？ –

例如子模板可能有：（并以这种方式递归地创建更多输入），如果我将整个东西包装在窗体标记中，我将嵌套窗体 –

这不会在嵌套组件上工作？因为ngForm也无法从嵌套输入中获取值。 –

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

相关推荐