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

Урок 5: Добавление входного параметра в компонент

Этот обучающий урок демонстрирует, как создать компонент @Input(), использовать его для передачи данных компоненту для настройки.

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

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

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

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

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

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

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

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

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

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

  • Шаблон HousingLocationComponent вашего приложения имеет свойство HousingLocation для получения входных данных.

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

Input позволяют компонентам обмениваться данными. Направление обмена данными — от родительского компонента к дочернему.

Чтобы получить данные от родительского компонента, дочерний компонент должен пометить свойство класса декоратором @Input(). Этот декоратор можно использовать в компонентах и директивах.

Для более подробного объяснения, пожалуйста, обратитесь к руководству Sharing data between child and parent directives and components.

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

Шаги урока

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

Шаг 1 — Импортируйте декоратор Input

Этот шаг импортирует декоратор Input в класс.

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

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

  2. Обновите импорты файла, чтобы включить Input и HousingLocation:

    1
2
3
    import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HousingLocation } from '../housinglocation';

Шаг 2 — Добавление свойства Input

  1. В том же файле добавьте свойство housingLocation типа HousingLocation в класс HousingLocationComponent. Добавьте ! после имени свойства и префикс с декоратором @Input():

    1
2
3
    export class HousingLocationComponent {
    @Input() housingLocation!: HousingLocation;
}

    Вы должны добавить !, потому что вход ожидает передачу значения. В данном случае значение по умолчанию отсутствует. В нашем примере приложения мы знаем, что значение будет передано — так задумано. Восклицательный знак называется оператором утверждения non-null и сообщает компилятору TypeScript, что значение этого свойства не будет равно null или undefined.

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

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

Обзор урока

В этом уроке вы создали новое свойство, оформленное с помощью декоратора @Input(). Вы также использовали оператор утверждения non-null, чтобы сообщить компилятору, что значение нового свойства не будет null или undefined.

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

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

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

Ссылки

Комментарии