Question

我正在使用Angular 4＆amp ;;构建应用程序离子3和我在组件上挣扎：

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

所以我了解了@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）

我尝试在console.log方法中制作一个set target(value)，并且每秒显示2k次。

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

有人可以帮忙吗？

感谢您的时间:)

Answer 1

您正在目标设定者中调用目标。

替换：

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

通过：

@Input() target;

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

Angular 4中的@Input @Output和EventEmitter

1 个答案: