31
Июл
2019

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

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

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


    <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.(untitled)


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

При изменении поля его значение помещается в свойство contactPerson.Директива может использоваться только с элементами формы.

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

Share

Тебе может это понравится...