【翻译】angular 实现自定义双向数据绑定

原文链接

你可能已经很熟悉 [(ngModel)] 以及它著名的香蕉盒子语法。这篇文章，我将会介绍ngModel是如何工作的，这有助于我们复现它的行为并实现我们自己的双向数据绑定。

现在，我们来创建一个message作为参数的组件，这个message就是该组件的model，我们将这样使用这个组件：

<example-component [(message)]="title"></example-component>

上面高亮的代码就是我们要实现的双向数据绑定。

首先，我们来剖析一下应用于ngModel上的香蕉盒子语法。下面是我们都知道的语法：

<input [(ngModel)]="title" type="text">

有趣的是[()]其实是下面这段代码的语法糖:

<input [ngModel]="title" (ngModelChange)="title= $event" type="text">

这段代码无疑更冗长，但却让人更容易理解，双向数据绑定其实就是两个单向数据绑定。

这个例子揭露的真相就是Change后缀的用法，让我们在自己的样例组件中使用这个技巧吧。

首先，我们创建一个带有 @Input 单向数据绑定的组件：

export class TwoWayDataBindingExampleComponent  {

  messageValue : string;

  @Input()
  get message(){
    return this.messageValue;
  }
  set message(val) {
    this.messageValue = val;
  }
}

这里有两个值得注意的地方，首先我用 messageValue来存储实际的信息，然后用message来暴露它，所以我可以用 TypeScript 的 getters和setters来读取messageValue的值。

这是该技术关键的一步，因为一旦model 改变了，需要 setter 做很多工作来通知其他的组件。

下面就是我们实现第二次单向数据绑定的方法：

export class TwoWayDataBindingExampleComponent  {

  messageValue : string;

  @Output()
  messageChange = new EventEmitter<string>();

  @Input()
  get message(){
    return this.messageValue;
  }

  set message(val) {
    this.messageValue = val;
    this.messageChange.emit(this.messageValue);
  }
}

现在万事俱备了，getter 和setter都使用messageValue来读取或更新数据模型，而且setter还通过 emit 事件通知其他的组件。

结果我们可以看到组件中应用的一个双向数据绑定语法如下：

<example-component [(message)]="title"></example-component>

很简单吧，只要我们知道其中的技巧，就可以在组件中实现我们自己的双向数据绑定了。