Обновить дочернее состояние (например, сбросить форму)

Question

Как лучше всего сбросить состояние дочернего компонента в Angular? Например. сброс формы ребенка.

Я разработал 5 возможных решений:

1. Child слушает примитивное значение (логическое), которое он получает через @Input. Использование setTimeout, в противном случае изменение будет слишком быстрым, и ребенок не будет зарегистрирован. Смотрите сценарий 3 в StackBlitz.
2. Передача наблюдаемого дочернему компоненту. Сценарий 4 на StackBlitz
3. Использование сложной структуры данных (объекта). Если вы каждый раз создаете новый объект, ребенок будет думать, что он совершенно другой, и, таким образом, сможет правильно запустить функцию сброса формы. Сценарий 5 на StackBlitz
4. ViewChild. Сценарий 6 на StackBlitz
5. Создание formControl для родителя и передача его потомку. Сценарий 7 на StackBlitz

https://stackblitz.com/github/laurensdewaele/parent-child-angular-react/tree/master/angular-example

Answer 1

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

В примерах выше я пропускаю хотя бы опцию ngOnChanges. Я думаю, что лучшие варианты хорошо описаны здесь: Как передать событие от родителя к ребенку?

Answer 2

1. Лучший способ - не использовать 100500 компонентов, если вам не нужно их повторно использовать. В этом случае 1 компонент для всех входных данных (или НЕТ компонентов. Все в app.component) и компонент для кнопки это не хорошо.

2. Это №3, если app.component имеет много дочерних компонентов.