Входные сигналы с input()
Объявляйте реактивные входные данные как сигналы.
«Входные сигналы с input()» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Входные данные на основе сигналов
Современный Angular предоставляет функцию input(), позволяющую объявлять входные данные компонентов как сигналы и заменяющую классический декоратор @Input реактивной альтернативой.
Объявление входного сигнала
Вызовите input(), указав необязательное значение по умолчанию. Результатом будет сигнал, доступный только для чтения.
import { Component, input } from "@angular/core";
@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
name = input("World");
}Чтение входного значения
Входной сигнал считывается вызовом как функции — и в коде, и в шаблонах.
@Component({
selector: "app-greet",
template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
name = input("World");
}Привязка из родительского компонента
Родительский компонент привязывается к входному сигналу так же, как к классическому входному значению, используя привязку свойства.
<app-greet [name]="userName"></app-greet>
// parent
userName = "Ada";Входные значения доступны только для чтения
Обычный input() доступен только для чтения внутри компонента. Нельзя вызвать для него set; только родительский компонент может изменить его значение.
// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signalsТипизация входных значений
Укажите обобщённый тип для обеспечения безопасности типов, особенно если значение по умолчанию отсутствует и тип невозможно вывести.
age = input<number>();
label = input<string>("Untitled");Входные значения в вычисляемых значениях
Поскольку входные значения являются сигналами, они интегрируются с computed для получения производного состояния, которое обновляется автоматически.
import { input, computed } from "@angular/core";
first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());Входные значения с effect
На изменения входных значений можно реагировать с помощью effect, который повторно запускается при изменении прочитанного сигнала.
constructor() {
effect(() => {
console.log("name is", this.name());
});
}ngOnChanges больше не нужен
При использовании входных сигналов часто больше не требуется ngOnChanges: computed и effect самостоятельно реагируют на изменения.
Псевдоним входного значения
С помощью параметра alias можно предоставить другое общедоступное имя привязки.
value = input(0, { alias: "count" });
<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>Зачем нужны входные сигналы
Входные сигналы реактивны, типобезопасны и удобно сочетаются с computed и effect, уменьшая объём шаблонного кода по сравнению с подходом на основе декоратора и жизненного цикла.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли входные сигналы.
Итоги
Функция input() объявляет реактивные входные сигналы, доступные только для чтения. Читайте их вызовом, задавайте им типы с помощью обобщённых типов, при необходимости создавайте для них псевдонимы и сочетайте их с computed и effect вместо ngOnChanges.
Часто задаваемые вопросы
Урок «Входные сигналы с input()» бесплатный?
Да — полный текст урока «Входные сигналы с input()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Входные сигналы с input()»?
Объявляйте реактивные входные данные как сигналы. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Входные сигналы с input()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Входные сигналы с input()
- Обязательные и преобразуемые входные данные
- Выходные данные с output()
- Запросы представления с viewChild