Внести вклад

Выходные свойства компонента

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

Angular использует функцию output() для реализации такого поведения.

ПРИМЕЧАНИЕ: Узнайте больше о пользовательских событиях в руководстве по output.

В этом упражнении вы узнаете, как использовать функцию output() для взаимодействия с компонентами.

Чтобы создать канал связи от дочернего компонента к родительскому, используйте функцию output для инициализации свойства класса.

child.ts

@Component({...})
class Child {
  incrementCountEvent = output<number>();
}

Теперь компонент может генерировать события, которые может прослушивать родительский компонент. События вызываются с помощью метода emit:

child.ts

class Child {
  ...

onClick() {
this.count++;
this.incrementCountEvent.emit(this.count);
}
}

Функция emit сгенерирует событие того же типа, который был определен в output.

Хорошо, теперь ваша очередь попробовать. Допишите код, выполнив следующие задачи:

  1. Add an output() property

    Обновите child.ts, добавив output-свойство с именем addItemEvent. Убедитесь, что тип output установлен как string.

  2. Complete addItem method

    В child.ts обновите метод addItem; используйте следующий код в качестве логики:

    child.ts

    addItem() {
  this.addItemEvent.emit('🐢');
}

  3. Update the App template

    В app.ts обновите шаблон, чтобы прослушивать генерируемое событие, добавив следующий код:

    <app-child (addItemEvent)="addItem($event)" />

    Теперь кнопка "Add Item" добавляет новый элемент в список при каждом нажатии.

Ого, на этом этапе вы освоили основы компонентов — впечатляет 👏

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