Почему инициализация данных не должна выполняться в конструкторе компонента в Angular?

Question

Я новичок в Angular 6. У меня есть требование, что мне нужно инициализировать все раскрывающиеся поля через вызовы API. Многие разработчики предлагают, чтобы вызовы API для инициализации данных выполнялись внутри ngOninit, а не через конструктор? Может кто-нибудь, пожалуйста, дайте мне знать причину этого?

Answer 1

constructor метод класса (или TypeScript в данном случае) - это особенность самого класса, а не угловая особенность. Angular не может контролировать, когда вызывается конструктор

конструктор вызывается, когда создается новое мгновение класса, но это не означает, что угловая отделка завершена, компонент и связка

import { Component, OnInit } from '@angular/core';

@Component({})
class ExampleComponent implements OnInit {
  constructor() {}

  // called on demand by Angular
  ngOnInit() {
    console.log('ngOnInit fired');
  }
}

const instance = new ExampleComponent();

// Angular calls this when necessary
instance.ngOnInit();

Обратите внимание, что движок JavaScript вызывает конструктор, а не Angular напрямую. Вот почему был создан хук жизненного цикла ngOnInit (и $ onInit в AngularJS).

ngOnInit просто для того, чтобы дать нам сигнал о том, что Angular завершил инициализацию компонента.

Эта фаза включает в себя первый проход в Обнаружении изменений свойств, которые мы можем связать с самим компонентом, таких как использование декоратора @ Input().

В связи с этим свойства @Input () доступны внутри ngOnInit, однако undefined внутри конструктора

Хук жизненного цикла ngOnInit является гарантией того, что ваши привязки легко доступны.

из документа

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

Последовательность жизненного цикла

1. ngOnChanges ()
2. ngOnInit ()
3. ngDoCheck ()
4. ngAfterContentInit ()
5. ngAfterContentChecked ()
6. ngAfterViewInit ()
7. ngAfterViewChecked ()

toddmotto - Угловой конструктор против ngOnInit

Существенная разница между Constructor и ngOnInit в Angular

Answer 2

Это потому, что constructor вызывается для инициализации класса, а не компонента. constructor вызывается раньше ngOnInit, на данный момент component еще не был создан, только экземпляр класса component был создан, поэтому ваши зависимости будут введены, но ваш код инициализации не будет выполняться.

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