0Pricing
Angular Academy · Урок

Обязательные и преобразуемые входные данные

Помечайте входные данные как обязательные и преобразуйте их значения.

«Обязательные и преобразуемые входные данные» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Расширенные возможности входных значений

Входные сигналы поддерживают две мощные возможности: пометку входного значения как обязательного и преобразование поступающих значений до их сохранения.

Обязательные входные значения

Используйте input.required(), когда родительский компонент всегда должен передавать значение. Значение по умолчанию отсутствует.

import { input } from "@angular/core";

export class UserComponent {
  userId = input.required<string>();
}

Зачем нужны обязательные значения

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

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Обязательные входные значения не бывают null

Поскольку обязательное входное значение должно быть предоставлено, его тип никогда не равен undefined, поэтому его можно безопасно читать без проверок на null.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Преобразование входных значений

Параметр transform запускает функцию для входящего значения до его сохранения; это полезно для приведения типов.

import { input } from "@angular/core";

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Приведение к логическому типу

Angular предоставляет booleanAttribute для преобразования значений в стиле атрибутов в настоящие логические значения. Это удобно для атрибутов, смысл которых определяется наличием.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Приведение к числовому типу

Аналогично, numberAttribute преобразует строковый атрибут в число.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Пользовательские функции преобразования

Можно написать любое преобразование для нормализации значений, например для удаления пробелов в строках.

label = input("", {
  transform: (v: string) => v.trim()
});

Типы входных и сохранённых значений при преобразовании

Преобразование может принимать один тип, а сохранять другой. Принимаемый тип используется в привязке родителями, а сохранённый тип — при чтении значения.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Совместное использование обязательности и преобразования

Можно сочетать обязательность с преобразованием, передав объект параметров в input.required().

value = input.required({
  transform: numberAttribute
});

Когда что использовать

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

Быстрая проверка

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

Итоги

Используйте input.required() для обязательных входных значений (не допускающих null и не имеющих значения по умолчанию), а параметр transform, включая booleanAttribute и numberAttribute, — для приведения значений. Эти возможности можно сочетать.

Часто задаваемые вопросы

Урок «Обязательные и преобразуемые входные данные» бесплатный?

Да — полный текст урока «Обязательные и преобразуемые входные данные» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Обязательные и преобразуемые входные данные»?

Помечайте входные данные как обязательные и преобразуйте их значения. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Обязательные и преобразуемые входные данные»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Входные сигналы с input()
  2. Обязательные и преобразуемые входные данные
  3. Выходные данные с output()
  4. Запросы представления с viewChild
← Назад к Angular Academy