Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як hooks працюють для динамічно створених компонентів?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

В Angular **lifecycle hooks для динамічно створених компонентів** працюють точно так само, як для звичайних компонентів, але з особливістю, що компонент створюється програмно через `ComponentFactory` або `ViewContainerRef`.

## Основні моменти

1. **Створення динамічного компонента**:

```ts
const factory = this.resolver.resolveComponentFactory(MyComponent);
const componentRef = this.container.createComponent(factory);
```

- `componentRef.instance` - це екземпляр компонента.

2. **Виклик hooks**:

- `ngOnChanges()` - викликається, якщо передані значення через `@Input` після створення компонента.
- `ngOnInit()`, `ngDoCheck()`, `ngAfterContentInit()`, `ngAfterViewInit()` та інші hooks - викликаються **автоматично Angular після створення компонента** у правильному порядку.
- `ngOnDestroy()` - викликається, коли ви **видаляєте компонент вручну** через `componentRef.destroy()`.

3. **Особливості**:

- Якщо ви створюєте компонент динамічно, **hooks спрацьовують лише після вставки його в контейнер (**`ViewContainerRef`**)**.
- Для керування вхідними даними (`@Input`) їх потрібно присвоїти **до або одразу після створення**, інакше `ngOnChanges` може не спрацювати.

Іншими словами, **для динамічно створених компонентів життєвий цикл повністю дотримується**, просто ви самі контролюєте момент створення і видалення, а Angular викликає hooks у тому ж порядку, що і для статично оголошених компонентів.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати162 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.