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

Связывание свойств

Привязка свойств в Angular помогает задавать значения для свойств HTML-элементов или директив. Используйте привязку свойств для таких задач, как переключение функций кнопки, программная установка путей и обмен значениями между компонентами.

Смотрите код для рабочего примера, содержащего фрагменты кода, приведенные в этом руководстве.

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

Понимание потока данных

Привязка свойств перемещает значение в одном направлении, из свойства компонента в свойство целевого элемента.

Для получения дополнительной информации о прослушивании событий смотрите Event binding.

Чтобы прочитать свойство целевого элемента или вызвать один из его методов, см. справку API для ViewChild и ContentChild.

Привязка к свойству

Чтобы привязать свойство элемента, заключите его в квадратные скобки, [], что идентифицирует свойство как целевое.

Целевое свойство — это свойство DOM, которому вы хотите присвоить значение.

Чтобы присвоить значение целевому свойству src элемента image, введите следующий код:

1
<img alt="item" [src]="itemImageUrl" />

В большинстве случаев целевое имя — это имя свойства, даже если оно кажется именем атрибута.

В данном примере src — это имя свойства элемента <img>.

Скобки [] заставляют Angular оценивать правую часть присваивания как динамическое выражение.

Без скобок Angular рассматривает правую часть как строковый литерал и устанавливает свойству это статическое значение.

Чтобы присвоить свойству строку, введите следующий код:

1
<app-item-detail childItem="parentItem"></app-item-detail>

Если опустить скобки, то будет отображаться строка parentItem, а не значение parentItem.

Установка свойства элемента в значение свойства компонента

Чтобы связать свойство src элемента <img> со свойством компонента, поместите src в квадратные скобки, за которыми следует знак равенства, а затем свойство.

Используя свойство itemImageUrl, введите следующий код:

1
<img alt="item" [src]="itemImageUrl" />

Объявите свойство itemImageUrl в классе, в данном случае AppComponent.

1
itemImageUrl = '../assets/phone.svg';

colspan и colSpan

Часто возникает путаница между атрибутом colspan и свойством colSpan. Обратите внимание, что эти два имени отличаются всего одной буквой.

Чтобы использовать связывание свойств с помощью colSpan, введите следующее:

1
2
3
4
<!-- Notice the colSpan property is camel case -->
<tr>
    <td [colSpan]="1 + 1">Three-Four</td>
</tr>

Чтобы отключить кнопку, пока свойство isUnchanged компонента равно true, введите следующее:

1
2
3
4
<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">
    Disabled Button
</button>

Чтобы установить свойство директивы, введите следующее:

1
2
3
4
<p [ngClass]="classes">
    [ngClass] binding to the classes property making this
    blue
</p>

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

1
<app-item-detail [childItem]="parentItem"></app-item-detail>

Переключение свойств кнопки

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

1
2
3
4
<!-- Bind button disabled state to `isUnchanged` property -->
<button type="button" [disabled]="isUnchanged">
    Disabled Button
</button>

Поскольку значение свойства isUnchanged в AppComponent равно true, Angular отключает кнопку.

1
isUnchanged = true;

Что дальше

📅 14.04.2022

Комментарии