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

Урок 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>.

В редакторе кода:

  1. Перейдите в src/app/home/home/home.component.ts.

  2. В свойстве template декоратора @Component обновите код, чтобы он соответствовал приведенному ниже:

    1
    <app-housing-location [housingLocation]="housingLocation"></app-housing-location>

    При добавлении привязки свойства к тегу компонента мы используем синтаксис [attribute] = "value", чтобы сообщить Angular, что назначенное значение должно рассматриваться как свойство класса компонента, а не как строковое значение.

    Значение справа — это имя свойства из HomeComponent.

Шаг 2 — Подтвердите, что код по-прежнему работает

  1. Сохраните изменения и убедитесь, что в приложении нет ошибок.

  2. Исправьте все ошибки, прежде чем переходить к следующему шагу.

Обзор урока

В этом уроке вы добавили новую привязку свойства и передали ссылку на свойство класса. Теперь HousingLocationComponent имеет доступ к данным, которые он может использовать для настройки отображения компонента.

Если у вас возникли трудности с этим уроком, вы можете просмотреть готовый код для него.

Следующие шаги

Для получения дополнительной информации о темах, рассмотренных в этом уроке, посетите:

Ссылки

Комментарии