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

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

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

1

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

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

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

contacts.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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

    constructor() {}
}

contacts-item.component.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

@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>

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

NgModel¶

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

1

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

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

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

Комментарии