angular6 自定義組件，實現雙向數據綁定

在包裝輸入類型的組件時，咱們須要向外暴露數據接口，用戶輸入和輸出，這時候在組件內部定義雙向綁定，會大大方便用戶的使用。

在編寫組件以前，首先看一下組件的使用方式和效果：

<binding-test [(userName)]="testBinding"></binding-test>
<p>app.component：{{testBinding}}</p>

其中binding-test標籤是自定義組件，利用[()]符號進行雙向綁定，下面p標籤顯示所綁定的值。
效果圖以下：

binding-test組件綁定的值顯示在網頁上。

編寫組件

• 新建組件視圖

簡單起見，咱們建立的組件只包含一個輸入框。新建binding-test.component.html以下：

<label for="">UserName:</label>
<input type="text"  [(ngModel)]="userName" (ngModelChange)="change()">

視圖層只有一個label和一個input標籤，這是一個最簡單的表單。
其中ngModelChange是當input發生變化時，觸發的事件。

• 新建組件類

雙向綁定的組件須要有一個 Input屬性和該屬性對應的Output事件，組件類binding-test.component.ts代碼以下：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'binding-test',
  templateUrl: './binding-test.component.html',
  styleUrls: ['./binding-test.component.css']
})

/**
 * 自定義組件雙向數據綁定
 */
export class BindingTestComponent implements OnInit {



  @Input() public userName;

  @Output() public userNameChange = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }


  /**
   * change
   */
  public change(userName: string) {
    this.userNameChange.emit(this.userName);
  }
}

其中主要代碼爲

注意： Output中 EventEmitter類型屬性的名字必須爲 Input屬性對應名字+ Change

至此，該組件便可使用相似於[(ngModel)]語法的雙向綁定了。