0Pricing
Angular Academy · Урок

Входные сигналы model()

Создавайте двусторонние связи с помощью сигналов model.

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

Сигналы и двусторонняя привязка

Современный Angular предлагает model() — основанный на сигналах способ создавать входные параметры с двусторонней привязкой без ручных пар input/output.

Объявление входного параметра model

Вызовите model(), чтобы создать изменяемый сигнал, к которому родительский компонент сможет привязаться двусторонним образом.

import { Component, model } from "@angular/core";

@Component({ selector: "app-toggle", template: "" })
export class ToggleComponent {
  checked = model(false);
}

Привязка из родительского компонента

Родительский компонент использует синтаксис «банан в коробке» для имени model, точно так же, как с ngModel.

<app-toggle [(checked)]="isOn"></app-toggle>

// parent
isOn = signal(true);

Чтение значения model

Model — это сигнал, поэтому для чтения вызовите его как функцию.

export class ToggleComponent {
  checked = model(false);
  describe() {
    return this.checked() ? "on" : "off";
  }
}

Запись в model

Обновляйте model с помощью set или update. Изменение автоматически передаётся обратно родительскому компоненту.

toggle() {
  this.checked.update(c => !c);
}

// or
turnOn() {
  this.checked.set(true);
}

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

Используйте model.required(), когда родительский компонент обязан передать значение.

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

export class FieldComponent {
  value = model.required<string>();
}

Использование model в шаблоне

Привязывайте сигнал model напрямую в собственном шаблоне компонента; его вызов возвращает текущее значение.

@Component({
  selector: "app-toggle",
  template: "<button (click)='flip()'>{{ checked() }}</button>"
})
export class ToggleComponent {
  checked = model(false);
  flip() { this.checked.update(v => !v); }
}

Ручной Output не нужен

При использовании model() не нужно объявлять отдельный @Output. Angular сам подключает событие изменения, используя имя по соглашению с добавлением Change.

model и input

Обычный input() доступен внутри компонента только для чтения, а model() можно изменять и использовать для двусторонней привязки к родительскому компоненту.

// read-only:
label = input("");

// two-way writable:
value = model("");

Счётчик с model

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

@Component({
  selector: "app-counter",
  template: "<button (click)='inc()'>{{ count() }}</button>"
})
export class CounterComponent {
  count = model(0);
  inc() { this.count.update(c => c + 1); }
}

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

Используйте model(), когда дочерний компонент владеет значением, которое родительский компонент также должен читать и изменять, например в пользовательских элементах форм, переключателях и ползунках.

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

Проверьте, насколько хорошо Вы поняли входные параметры-сигналы model.

Итоги

Функция model() создаёт изменяемый сигнал, поддерживающий двустороннюю привязку без ручной пары input/output. Читайте его вызовом, изменяйте с помощью set или update, а из родительского компонента привязывайте через [(name)].

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

Урок «Входные сигналы model()» бесплатный?

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

Чему я научусь в уроке «Входные сигналы model()»?

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

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

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

Сколько времени занимает урок «Входные сигналы model()»?

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

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

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

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

  1. Повторение связывания свойств и событий
  2. Двустороннее связывание с ngModel
  3. Входные сигналы model()
  4. Пользовательские свойства с двусторонним связыванием
← Назад к Angular Academy