Двустороннее связывание

Механизм двустороннего связывания (angular two way binding) используется, когда необходимо отобразить свойство в шаблоне (одностороннее связывание) и обновить его при изменении значения (возникновение события) без перезагрузки страницы.

Синтаксис двустороннего связывания представляет собой слияние [] одностороннего связывания и () привязки события.

<contacts-item [(name)]="contactPerson"></contacts-item>

Запись [(name)]="contactPerson" означает, что при изменении name в компоненте contacts-item его значение будет присвоено свойству contactPerson компонента, в который входит contacts-item.

Изменим пример из предыдущей главы.

contacts.component.ts

@Component({
  selector: 'contacts',
  template: `
    <contacts-item [(name)]="contactPerson"></contacts-item>
    <p>{{ contactPerson }}</p>
  `,
})
export class ContactsComponent {
  contactPerson: string

  constructor() {}
}

contacts-item.component.ts

@Component({
  selector: 'contacts-item',
  template: `
    <button (click)="showContactPerson()">Show</button>
  `,
})
export class ContactsItemComponent {
  @Input() name: string = 'Unknown'
  @Output() nameChange = new EventEmitter<String>()

  constructor() {}

  showContactPerson(): void {
    this.name = 'Peter'
    this.nameChange.emit(this.name)
  }
}

Очевидно, что <contacts-item [(name)]="contactPerson"></contacts-item> является более удобным синтаксисом для <contacts-item [name]="contactPerson" (nameChange)="contactPerson = $event"></contacts-item>

Общепринято при использовании angular two way binding метод, который изменяет значение отслеживаемого свойства (здесь name), называть как "имя свойства" + "Change" (здесь nameChange).

Декораторы @Input() и @Output() рассмотрены здесь.

NgModel

Для двустороннего связывания в полях формы используется встроенная в Angular директива NgModel.

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

При изменении поля его значение помещается в свойство contactPerson.

Директива может использоваться только с элементами формы.

NgModel находится в FormsModule, поэтому перед тем, как ее использовать, импортируйте FormsModule библиотеки @angular/forms.

Комментарии