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

Урок 7: Добавление интерполяции в шаблон компонента

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

Затраты времени: ожидайте, что на выполнение этого урока вы потратите около 10 минут.

Перед началом

Этот урок начинается с кода из предыдущего урока, поэтому вы можете:

  • Использовать код, созданный в Уроке 6, в своей интегрированной среде разработки (IDE).

  • Начните с примера кода из предыдущего урока. Выберите код из Урока 6, где вы можете:

    • Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.

    • Использовать download пример и открыть его в вашей IDE.

Если вы не просмотрели введение, посетите Введение в Angular tutorial, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.

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

После завершения

  • Ваше приложение будет отображать интерполированные значения в шаблоне HousingLocationComponent.
  • Ваше приложение будет отображать данные о местоположении жилья в браузере.

Концептуальный предварительный просмотр интерполяции

В уроке 6 вы добавили привязку данных к шаблону, чтобы разработчики могли передавать данные из HomeComponent в HousingLocationComponent. Следующим шагом будет отображение значений (свойств и Input значений) в шаблоне. Для выполнения этой задачи необходимо использовать интерполяцию.

Синтаксис Angular template syntax поддерживает смешивание статического содержимого шаблона с динамическими значениями и выражениями.

Используя {{ expression }} в шаблонах Angular, вы можете выводить значения из свойств, Inputs и действительных выражений JavaScript.

Для более подробного объяснения, пожалуйста, обратитесь к руководству Отображение значений с интерполяцией.

Шаги урока

Выполните эти шаги в коде приложения в вашей IDE.

Шаг 1 — Обновление шаблона HousingLocationComponent для включения интерполированных значений

Этот шаг добавляет новую HTML структуру и интерполированные значения в шаблон HousingLocationComponent.

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

  1. Перейдите в src/app/housing-location/housing-location.component.ts.

  2. В свойстве template декоратора @Component замените существующую HTML-разметку следующим кодом:

    1
2
3
4
5
6
7
    template: `
<section class="listing">
    <img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
    <h2 class="listing-heading">{{ housingLocation.name }}</h2>
    <p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
</section>
`,

    В этом обновленном коде шаблона вы использовали связывание свойств для привязки housingLocation.photo к атрибуту src. Атрибут alt использует интерполяцию для придания большего контекста alt-тексту изображения.

    Вы используете интерполяцию для включения значений имени, города и штата в свойство housingLocation.

Шаг 2 — Подтвердите отображение изменений в браузере

  1. Сохраните все изменения.

  2. Откройте браузер, чтобы подтвердить, что приложение отображает данные образца фотографии, города и штата.

    рамка браузера приложения homes-app, отображающая логотип, поле ввода текста фильтра, кнопку поиска и UI-карту местоположения жилья

Обзор урока

В этом уроке вы добавили новую HTML-структуру и использовали синтаксис шаблонов Angular для рендеринга значений в шаблоне HousingLocation. Теперь у вас есть два важных навыка:

  • передача данных компонентам
  • интерполяция значений в шаблон

С помощью этих навыков ваше приложение теперь может обмениваться данными и отображать динамические значения в браузере. Отличная работа.

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

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

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

Ссылки

Комментарии