Опыт 02 · Components · Учебная заметка

Данные входят, события выходят

Компонент карточки получает задачу и сообщает, какую запись попросили отметить.

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

Карточка без задачи ничего полезного не покажет. Объявите input.required<Task>(), чтобы передача объекта стала частью контракта компонента. В шаблоне значение читается вызовом task().

Состояние остаётся у владельца

Карточка знает, что человек нажал кнопку. Решение о записи в общий список принимает родитель. Передайте наружу идентификатор задачи через output; не меняйте объект, полученный от родителя.

Разведите разные события

Отметка и удаление — разные намерения. Явные имена событий помогут читать шаблон и не перепутать действия при добавлении нового поведения.

Пример для разбора

export class TaskCard {
  task = input.required<Task>();
  mark = output<number>();

  complete() {
    this.mark.emit(this.task().id);
  }
}

Теперь ваша очередь

Подключите две карточки к родительскому списку. Нажатие должно менять только выбранную запись.

Первоисточник: официальная документация по теме ↗