Внести вклад

Входные свойства компонента

Иногда при разработке приложений требуется передать данные в компонент. Эти данные могут использоваться для настройки компонента или передачи информации от родительского компонента к дочернему.

Angular использует концепцию, называемую input. Это похоже на props в других фреймворках. Чтобы создать свойство input, используйте функцию input().

ПРИМЕЧАНИЕ: Подробнее о приеме данных с помощью входных свойств читайте в руководстве по inputs.

В этом упражнении вы узнаете, как использовать функцию input() для отправки информации в компоненты.

Чтобы создать свойство input, добавьте функцию input() для инициализации свойства класса компонента:

user.ts

class User {
  occupation = input<string>();
}

Когда вы готовы передать значение через input, значения можно задать в шаблонах, используя синтаксис атрибутов. Вот пример:

app.ts

@Component({
  ...
  template: `<app-user occupation="Angular Developer"></app-user>`
})
export class App {}

Функция input возвращает InputSignal. Вы можете прочитать значение, вызвав этот сигнал.

user.ts

@Component({
  ...
  template: `<p>The user's occupation is {{occupation()}}</p>`
})

  1. Define an input() property

    Обновите код в user.ts, чтобы определить свойство input в классе User с именем name и укажите тип string. Пока не задавайте начальное значение и вызовите input() без аргументов. Не забудьте обновить шаблон, чтобы вызвать и интерполировать свойство name в конце предложения.

  2. Pass a value to the input property

    Обновите код в app.ts, чтобы передать свойство name со значением "Simran".

    После успешного обновления кода приложение отобразит The user's name is Simran.

Хотя это здорово, это лишь одно направление взаимодействия компонентов. Что, если вы хотите отправить информацию и данные родительскому компоненту от дочернего? Переходите к следующему уроку, чтобы узнать.

P.S. вы отлично справляетесь — так держать 🎉