Перейти к содержанию

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

📅 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

Помните, что атрибуты HTML и свойства DOM — это разные вещи, даже если они имеют одинаковые имена.

В 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 предоставляет три категории привязки данных в зависимости от направления потока данных:

  • От источника к представлению
  • От представления к источнику
  • В двусторонней последовательности от представления к источнику и от источника к представлению.
Тип Синтаксис Категория
Interpolation
Property
Attribute
Class
Style		 {{expression}}
[target]="expression" 		Односторонний переход от источника данных к объекту просмотра
Event (target)="statement" Односторонний переход от цели представления к источнику данных
Двусторонний [(target)]="expression" Двусторонний

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

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

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

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

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

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

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

Свойство

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

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>

Ссылки

Комментарии