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

Двустороннее связывание дает компонентам вашего приложения возможность обмениваться данными. Используйте двустороннюю привязку для прослушивания событий и обновления значений одновременно между родительским и дочерним компонентами.

Предварительные условия¶

Чтобы получить максимальную отдачу от двустороннего связывания, вы должны иметь базовое представление о следующих концепциях:

• Связывание свойств
• Связывание событий
• Входы и выходы

Двустороннее связывание объединяет связывание свойств с связыванием событий:

Добавление двусторонней привязки данных¶

Синтаксис двустороннего связывания данных в Angular представляет собой комбинацию квадратных скобок и круглых скобок, [()]. Синтаксис [()] сочетает скобки привязки свойств, [], со скобками привязки событий, (), следующим образом.

1

<app-sizer [(size)]="fontSizePx"></app-sizer>

Как работает двустороннее связывание¶

Чтобы двустороннее связывание данных работало, свойство @Output() должно использовать шаблон inputChange, где input — это имя свойства @Input(). Например, если свойством @Input() является size, то свойство @Output() должно быть sizeChange.

Следующий sizerComponent имеет свойство значения size и событие sizeChange. Свойство size является @Input(), поэтому данные могут поступать в sizerComponent.

Событие sizeChange — это @Output(), которое позволяет данным выходить из sizerComponent в родительский компонент.

Далее есть два метода, dec() для уменьшения размера шрифта и inc() для увеличения размера шрифта. Эти два метода используют resize() для изменения значения свойства size в пределах ограничений min/max, а также для эмиссии события, передающего новое значение size.

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

export class SizerComponent {
    @Input() size!: number | string;
    @Output() sizeChange = new EventEmitter<number>();

    dec() {
        this.resize(-1);
    }
    inc() {
        this.resize(+1);
    }

    resize(delta: number) {
        this.size = Math.min(
            40,
            Math.max(8, +this.size + delta)
        );
        this.sizeChange.emit(this.size);
    }
}

Шаблон sizerComponent имеет две кнопки, каждая из которых привязывает событие click к методам inc() и dec(). Когда пользователь нажимает на одну из кнопок, sizerComponent вызывает соответствующий метод.

Оба метода, inc() и dec(), вызывают метод resize() с +1 или -1, который в свою очередь вызывает событие sizeChange с новым значением размера.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div>
    <button type="button" (click)="dec()" title="smaller">
        -
    </button>
    <button type="button" (click)="inc()" title="bigger">
        +
    </button>
    <span [style.font-size.px]="size"
        >FontSize: {{size}}px</span
    >
</div>

В шаблоне AppComponent, fontSizePx двусторонне связан с SizerComponent.

1
2

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

В AppComponent, fontSizePx устанавливает начальное значение SizerComponent.size, задавая значение 16.

1

fontSizePx = 16;

Нажатие на кнопки обновляет AppComponent.fontSizePx. Измененное значение AppComponent.fontSizePx обновляет привязку стиля, что делает отображаемый текст больше или меньше.

Синтаксис двусторонней привязки является сокращением для комбинации привязки свойств и привязки событий. Привязка SizerComponent как отдельная привязка свойств и привязка событий выглядит следующим образом.

1
2
3
4

<app-sizer
    [size]="fontSizePx"
    (sizeChange)="fontSizePx=$event"
></app-sizer>

Переменная $event содержит данные события SizerComponent.sizeChange. Angular присваивает значение $event событию AppComponent.fontSizePx, когда пользователь нажимает на кнопки.

28.02.2022

Комментарии