0Pricing
Angular Academy · Урок

Пользовательские свойства с двусторонним связыванием

Предоставляйте собственные входные данные для двустороннего связывания.

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

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

Любое свойство компонента можно сделать доступным для двусторонней привязки. Angular поддерживает два подхода: классическую пару @Input и @Output или современный сигнал model().

Соглашение об именовании

Чтобы двусторонняя привязка работала, имя выходного параметра должно состоять из имени входного параметра и суффикса Change. Например, для входного параметра size нужен выходной параметр sizeChange.

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

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

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

export class RatingComponent {
  @Input() value = 0;
}

Объявление соответствующего выходного параметра

Добавьте @Output с типом EventEmitter и именем с суффиксом Change.

import { Input, Output, EventEmitter } from "@angular/core";

export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
}

Отправка события при обновлении

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

setValue(v: number) {
  this.value = v;
  this.valueChange.emit(v);
}

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

Теперь родительский компонент может использовать синтаксис «банан в коробке» для Вашего пользовательского свойства.

<app-rating [(value)]="score"></app-rating>

// parent
score = 3;

Полный пример Input/Output

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

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value }}</button>"
})
export class RatingComponent {
  @Input() value = 0;
  @Output() valueChange = new EventEmitter<number>();
  bump() {
    this.value++;
    this.valueChange.emit(this.value);
  }
}

Современный подход с model

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

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

@Component({
  selector: "app-rating",
  template: "<button (click)='bump()'>{{ value() }}</button>"
})
export class RatingComponent {
  value = model(0);
  bump() { this.value.update(v => v + 1); }
}

Сравнение двух подходов

Классическая пара явная и работает повсеместно; model() компактнее и основан на сигналах. Оба подхода предоставляют родительским компонентам одну и ту же привязку [(value)].

Несколько двусторонних свойств

Компонент может предоставлять несколько свойств с двусторонней привязкой, каждое из которых следует соглашению input/inputChange.

@Input() min = 0;
@Output() minChange = new EventEmitter<number>();
@Input() max = 100;
@Output() maxChange = new EventEmitter<number>();

Выбор подхода

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

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

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

Итоги

Для пользовательской двусторонней привязки нужны входной параметр и выходной параметр с именем inputChange, отправляющий событие при каждом обновлении. Современный сигнал model() автоматически создаёт эту пару и является кратким вариантом для нового кода.

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

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

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

Чему я научусь в уроке «Пользовательские свойства с двусторонним связыванием»?

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

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

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

Сколько времени занимает урок «Пользовательские свойства с двусторонним связыванием»?

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

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

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

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

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