为自定义属性实现双向数据绑定答案

【问题标题】：Implement two-way data binding for custom property为自定义属性实现双向数据绑定
【发布时间】：2018-09-12 08:03:17
【问题描述】：

我在primeng组件中看到对这样的一些属性使用类似ngModel（双向数据绑定）样式的东西

[(selection)]="selectedItem";

看起来像

@Input() selection;
@Output() selection:EventEmitter<any> = new EventEmitter<any>();

我怎样才能实现这样的事情，是否有可能为不止一个属性做这样的事情

 <component-a  [(selection)]="selectedItem"  [(data)]="selectedData"></component-a>

【问题讨论】：

标签： angular primeng

【解决方案1】：

Angular docs

<app-sizer 
  [(size)]="fontSizePx">
</app-sizer>

双向绑定语法实际上只是一个语法糖属性绑定和事件绑定。 Angular 脱糖绑定到这个：

<app-sizer
  [size]="fontSizePx"
  (sizeChange)="fontSizePx=$event">
</app-sizer>

要为属性selection 创建双向绑定，请使用：

@Input() selection;

// You have to follow this convention (For Output property)
// i.e. <propertyName><Change> like selectionChange

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

并更改组件中的选择，如下所示：

changeSelection(newSelection)
{
    this.selection = newSelection;

    // emit change event to parent component
    this.selectionChange.emit(this.selection);  
}

【讨论】：

如何调用 selectionChange.emit()？
如示例中的 emit 将在组件中的值发生更改后手动触发 @DmitriySnitko

【解决方案2】：

在您的子组件中，您必须像这样实现双向绑定接口：

private _selection: any;
get selection(): any {
    return this._selection;
}
@Input()
set selection(value: any) {
    if(this._selection === value) {
        return;
    }
    this._selection = value;
    this.selectionChange.emit(this._selection);
}
@Output()
selectionChange = new EventEmitter<any>();

必须通过将propertyNameChange 添加到@Input 名称来命名@Output。所以你可以像这样在你的父组件模板中使用它：

<mycomponent [(selection)]="fieldInParentComponent"></mycomponent>

【讨论】：

【解决方案3】：

https://angular.io/guide/template-syntax#two-way-binding

当元素具有名为 x 的可设置属性和名为 xChange 的相应事件时，[(x)] 语法很容易演示。

这意味着，您只需要在您的子组件上使用相应的selectionChange 方法。因此，如果您希望将属性 selection 的 ParentComponent 绑定到 ChildComponent，请按照以下步骤操作：

在您的ChildComponent 中包含以下内容：

@Input() selection;
@Output() selectionChange = new EventEmitter<any>();

在您的ParentComponent 模板中：
```
<child [(selection)]="selection">
```

总之，如果你的属性名是x，你只需要将其对应的EventEmitter命名为xChange，并为子组件[(x)] = "parentProperty"做banana-in-a-box语法，Angular会负责其余的。

【讨论】：

【解决方案4】：

在您的子组件 (component-a) 中，您需要一个 @output

@Output() change:EventEmitter = new EventEmitter();

然后你通过

通知父组件更改的值

change.emit(newValue);

另见 Angular2：https://stackoverflow.com/a/33220997/3710630

【讨论】：

你能检查我的答案吗？我的目标是创建一个像 ngModel 一样用作输入和输出的属性
在 EventEmitter 上调用 .next() 已被弃用。改用发射