角度自定义组件数据绑定

Question

在以下用例中，我要将复杂对象的一部分传递给角度组件。

<app-component [set]="data.set"></app-component>

现在，我希望父类中的对象“ data.set”始终与子类中的对象“ set”相同。

如果我改用以下方式进行操作，则两个对象相同，并且更改已“同步”。

<app-component [set]="set"></app-component>

当绑定'data.set'而不是'set'而不手动触发 EventEmitter 时，如何实现此行为？

Answer 1

如果您需要对set中的app-component进行更改以在父组件中可见，那么，您需要使用双向绑定。

<app-component [(set)]="data.set"></app-component>

在app-component.component.ts文件中，您需要声明两个成员：

   @Input()
   public set: any;

   @Ouput()
   public setChange:EventEmitter = new EventEmitter();

只要set的值发生变化，就需要发出更新的值。

   this.setChange.emit(newVal);

如果需要更多详细信息，可以参考this article。