Урок 6: Добавление привязки свойств к шаблону компонента¶
Этот урок демонстрирует, как добавить привязку свойств к шаблону и использовать ее для передачи динамических данных компонентам.
Затраты времени: на выполнение этого урока вы потратите около 5 минут.
Перед началом¶
Этот урок начинается с кода из предыдущего урока, поэтому вы можете:
-
Использовать код, созданный в Уроке 5, в своей интегрированной среде разработки (IDE).
-
Начните с примера кода из предыдущего урока. Выберите код из Урока 5, где вы можете:
-
Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.
-
Использовать download пример и открыть его в вашей IDE.
-
Если вы не просмотрели введение, посетите Введение в Angular tutorial, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.
Если у вас возникнут трудности во время этого урока, вы можете просмотреть готовый код для этого урока.
После завершения¶
- Ваше приложение имеет привязки данных в шаблоне
HomeComponent. - Ваше приложение отправляет данные из
HomeComponentвHousingLocationComponent.
Концептуальный просмотр входов¶
В уроке 5 вы добавили декораторы @Input к свойствам компонента HousingLocationComponent, чтобы компонент мог получать данные. В этом уроке вы продолжите процесс обмена данными от родительского компонента к дочернему компоненту путем привязки данных к этим свойствам в шаблоне. В Angular существует несколько форм привязки данных, в этом уроке вы будете использовать привязку свойств.
Привязка свойств позволяет вам подключить переменную к Input в шаблоне Angular. Затем данные динамически привязываются к Input.
Для более подробного объяснения, пожалуйста, обратитесь к руководству Property binding.
Шаги урока¶
Выполните эти шаги над кодом приложения в вашей IDE.
Шаг 1 — Обновление тега <app-housing-location> в шаблоне HomeComponent¶
Этот шаг добавляет привязку свойств к тегу <app-housing-location>.
В редакторе кода:
-
Перейдите в
src/app/home/home/home.component.ts. -
В свойстве template декоратора
@Componentобновите код, чтобы он соответствовал приведенному ниже:1<app-housing-location [housingLocation]="housingLocation"></app-housing-location>При добавлении привязки свойства к тегу компонента мы используем синтаксис
[attribute] = "value", чтобы сообщить Angular, что назначенное значение должно рассматриваться как свойство класса компонента, а не как строковое значение.Значение справа — это имя свойства из
HomeComponent.
Шаг 2 — Подтвердите, что код по-прежнему работает¶
-
Сохраните изменения и убедитесь, что в приложении нет ошибок.
-
Исправьте все ошибки, прежде чем переходить к следующему шагу.
Обзор урока¶
В этом уроке вы добавили новую привязку свойства и передали ссылку на свойство класса. Теперь HousingLocationComponent имеет доступ к данным, которые он может использовать для настройки отображения компонента.
Если у вас возникли трудности с этим уроком, вы можете просмотреть готовый код для него.