Ràng buộc sự kiện hai chiều trong Angular

Trong Angular cũng có thể thực hiện ràng buộc hai chiều các sự kiện của cả hai thành phần: thành phần cha và thành phần con. Hãy tạo trong mẫu HTML của thành phần con một input với ràng buộc hai chiều tên người dùng và hàm thay đổi tên:

app/user/user.component.html<input [ngModel]="userName" (ngModelChange)="onNameChange($event)" />

Chuyển đến thành phần con của chúng ta và nhập trang trí @Input vào nó. Nó cần thiết để làm việc với các input:

app/user/user.component.tsimport { Component, Input, Output, EventEmitter } from '@angular/core';

Tiếp theo, ràng buộc trang trí @Input với tên người dùng. Và trang trí @Output ràng buộc với đối tượng userNameChange, sẽ được gọi trong hàm onNameChange:

app/user/user.component.tsexport class UserComponent {
  @Input() userName: string = '';
  @Output() userNameChange = new EventEmitter<string>();
  onNameChange(model: string) {
    this.userName = model;
    this.userNameChange.emit(model);
  }
}

Bây giờ chuyển đến thành phần chính và thêm thuộc tính tên vào lớp của nó:

app/app.component.tsexport class AppComponent {
  name: string = 'alex';
}

Và trong mẫu HTML của thành phần cha thực hiện ràng buộc hai chiều thuộc tính userName với giá trị của thuộc tính name của thành phần cha:

ap.component.html<user-data [(userName)]="name"></user-data>
<p>You choose name: {{ name }}</p>