Angular 4 中的 @Input @Output 和 EventEmitter答案

【问题标题】：@Input @Output and EventEmitter in Angular 4Angular 4 中的 @Input @Output 和 EventEmitter
【发布时间】：2018-11-17 12:02:26
【问题描述】：

我正在使用 Angular 4 和 Ionic 3 构建一个应用程序，但我正在努力使用组件：

我创建了一个组件MesuresPreventionsComponent（请原谅我的法语：p），这个组件需要来自他的父组件（离子页面）的列表，但我也希望它能够更新父组件中的列表组件。

所以我了解了@Input 和@Output，并认为我会使用 EventEmitter 来检测更改并从父级更新列表。

我已经阅读了这个Stack Overflow answer 并想出了如何去做。

这就是我所做的：

@Output() targetChange: EventEmitter<Array<any>> = new EventEmitter<Array<any>>();

@Input() set target(value){
    this.target = value;
  };

然后我以这种方式在按钮单击时发出我的数据：

alert.addButton({
    text: 'Ok',
    handler: (data: any) => {
      this.targetChange.emit(data);
      console.log('Radio data:', data)
    }
})

在我的父组件（离子页面）上，我在模板中使用我的MesuresPreventionsComponent：

<mesures-preventions  [(target)]="conditionsGeneralesDeTravail.mesuresPreventionsConseillees" ></mesures-preventions>

但问题是@Input() set target(value) 在页面加载时被调用超过 9000 次，引发范围错误：

未捕获（承诺中）：RangeError：超出最大调用堆栈大小 RangeError：超出最大调用堆栈大小在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:153:23) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25) 在 MesuresPreventionsComponent.set [作为目标] (http://localhost:8100/build/0.js:154:25)

我尝试在set target(value) 方法中创建一个console.log，它确实在一秒钟内显示了2k 次。

我不知道为什么这个方法会循环执行。

有人可以帮忙吗？

感谢您的宝贵时间:)

【问题讨论】：

标签： angular ionic3

【解决方案1】：

您正在目标设置器中调用目标。

替换：

@Input() set target(value) {
  this.target = value;
};

作者：

@Input() target;

另外，您不能使用双向绑定[(target)]，您应该将其替换为[target]。如果您想创建具有双向绑定的组件，请查看this alligator.io tutorial。

【讨论】：