Синтаксис связывания данных¶

28.02.2022

Привязка данных автоматически поддерживает страницу в актуальном состоянии на основе состояния вашего приложения. Вы используете привязку данных для указания таких вещей, как источник изображения, состояние кнопки или данные для конкретного пользователя.

Привязка данных и HTML¶

Разработчики могут настраивать HTML, указывая атрибуты со строковыми значениями. В следующем примере атрибуты class, src и disabled изменяют элементы div, img и button соответственно.

1
2
3

<div class="special">Plain old HTML</div>
<img src="images/item.png" />
<button disabled>Save</button>

Используйте привязку данных для управления такими вещами, как состояние кнопки:

1
2

<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">Save</button>

Обратите внимание, что привязка происходит к свойству disabled DOM-элемента кнопки, а не к атрибуту. Привязка данных работает со свойствами элементов DOM, компонентов и директив, а не с атрибутами HTML.

Атрибуты HTML и свойства DOM¶

Angular binding различает атрибуты HTML и свойства DOM.

Атрибуты инициализируют свойства DOM, и вы можете настроить их для изменения поведения элемента. Свойства — это характеристики узлов DOM.

• Некоторые атрибуты HTML имеют соответствие 1:1 со свойствами; например,

  1

  id

• Некоторые атрибуты HTML не имеют соответствующих свойств; например,

  1

  aria-*

• Некоторые свойства DOM не имеют соответствующих атрибутов; например,

  1	textContent

В Angular единственная роль HTML-атрибутов заключается в инициализации состояния элементов и директив.

Когда вы пишете привязку данных, вы имеете дело исключительно со свойствами и событиями DOM целевого объекта.

Пример 1: <input>¶

Когда браузер отображает <input type="text" value="Sarah">, он создает соответствующий узел DOM со свойством value и инициализирует это value значением "Sarah".

1

<input type="text" value="Sarah" />

Когда пользователь вводит Sally в <input>, свойство элемента DOM value становится Sally. Однако, если посмотреть на HTML-атрибут value, используя input.getAttribute('value'), можно увидеть, что атрибут остается неизменным — он возвращает "Sarah".

HTML-атрибут value определяет начальное значение; свойство DOM value — это текущее значение.

Чтобы увидеть атрибуты в сравнении со свойствами DOM в работающем приложении, смотрите живой пример специально для синтаксиса связывания.

Пример 2: отключенная кнопка¶

Свойство disabled кнопки по умолчанию равно false, поэтому кнопка включена.

Когда вы добавляете атрибут disabled, вы инициализируете свойство disabled кнопки значением true, которое отключает кнопку.

1

<button disabled>Test Button</button>

Добавление и удаление атрибута disabled отключает и включает кнопку. Однако значение атрибута не имеет значения, поэтому нельзя включить кнопку, написав <button disabled="false">Still Disabled</button>.

Для управления состоянием кнопки вместо этого следует установить свойство disabled.

Сравнение свойств и атрибутов¶

Хотя технически можно установить привязку атрибута [attr.disabled], значения отличаются тем, что привязка свойства должна быть булевым значением, а соответствующая привязка атрибута зависит от того, является ли значение null или нет. Рассмотрим следующее:

1
2

<input [disabled]="condition ? true : false" />
<input [attr.disabled]="condition ? 'disabled' : null" />

В первой строке, использующей свойство disabled, используется булево значение. Вторая строка, использующая атрибут disabled, проверяет значение null.

Как правило, следует использовать привязку к свойствам, а не к атрибутам, поскольку булево значение легко читается, синтаксис короче, а свойство более эффективно.

Чтобы увидеть пример кнопки disabled в работающем приложении, посмотрите живой пример. В этом примере показано, как переключить свойство disabled из компонента.

Типы привязки данных¶

Angular предоставляет три категории привязки данных в зависимости от направления потока данных:

• От источника к представлению
• От представления к источнику
• В двусторонней последовательности от представления к источнику и от источника к представлению.

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

Пунктуация привязки в виде [], (), [()] и префикс задают направление потока данных.

• Используйте [] для привязки источника к представлению
• Используйте () для привязки от представления к источнику
• Используйте [()] для двухстороннего связывания в последовательности вид — источник — вид.

Поместите выражение или утверждение справа от знака равенства в двойные кавычки (""). Для получения дополнительной информации смотрите Интерполяция и Шаблонные утверждения.

Типы и цели связывания¶

Целью привязки данных может быть свойство, событие или имя атрибута. Каждый открытый член исходной директивы автоматически доступен для связывания в шаблонном выражении или утверждении.

В следующей таблице перечислены цели для различных типов привязки.

Свойство¶

Свойство элемента, свойство компонента, свойство директивы

alt, src, hero и ngClass в следующих:

1
2
3

<img [alt]="hero.name" [src]="heroImageUrl" />
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>

Событие¶

Событие элемента, событие компонента, событие директивы

click, deleteRequest и myClick в следующем:

1
2
3
4
5

<button type="button" (click)="onSave()">Save</button>
<app-hero-detail
    (deleteRequest)="deleteHero()"
></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>

Двусторонний¶

Событие и собственность

1

<input [(ngModel)]="name" />

Атрибут¶

Атрибут (исключение)

1

<button type="button" [attr.aria-label]="help">help</button>

Класс¶

Свойство class

1

<div [class.special]="isSpecial">Special</div>

Стиль¶

свойство style

1
2
3
4

<button
    type="button"
    [style.color]="isSpecial ? 'red' : 'green'"
></button>

Ссылки¶

• Binding syntax

Комментарии