Когда событие OnInit запускается для динамически загруженного углового компонента?

Question

Я динамически загружаю угловой компонент (MyComponent) со следующим кодом. Я также передаю некоторые данные компоненту после его создания.

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
this.viewContainerRef.clear();
let componentRef = this.viewContainerRef.createComponent(componentFactory);

(<MyComponent>componentRef.instance).setData(data);

Когда будет запущено событие OnInit жизненного цикла MyComponent? Будет ли он активирован сразу после вызова createComponent() Или он будет вызываться только после setData()?

Answer 1

Хук

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

ViewContainerRef::createComponent метод только присоединяет вновь созданный вид к текущему виду и отображает его.

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

Следующая фаза обнаружения изменений начинается после того, как NgZone определит, что не запланировано никаких микрозадач. Например, это произойдет после вашего обработчика события или после вызова http.

Вы можете вручную активировать обнаружение изменений для созданного представления:

const componentRef = this.target.createComponent(componentFactory);

componentRef.changeDetectorRef.detectChanges(); // ngOnInit will be called 

componentRef.instance.x = 3; // access this.x in ngOnInit will give you undefined

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

const componentRef = this.target.createComponent(componentFactory);

componentRef.instance.x = 3;

// somewhen later ngOnInit will be called 

Answer 2

С документация :

Инициализация директивы / компонента после того, как Angular впервые отобразит свойства привязки к данным и установит входные свойства директивы / компонента.

Вызывается один раз, после первого ngOnChanges ().

Это означает, что он вызывается после завершения интерполяции и установки входов.