PassFront
  1. PassFront
  2. База знаний
  3. Жизненный цикл

Чем constructor отличается от ngOnInit в Angular?

Жизненный цикл

`constructor` — конструктор класса TypeScript, он нужен для внедрения зависимостей, `ngOnInit` — хук, который Angular вызывает после первой установки входных свойств.

Что делать где

  • constructor: получить зависимости, простое присваивание. Входные свойства @Input на этот момент ещё не установлены.
  • ngOnInit: инициализация, запросы данных, подписки, работа со входными данными.
export class UserComponent implements OnInit {
  @Input() id!: string;
  user$!: Observable<User>;

  constructor(private users: UserService) {}   // только DI

  ngOnInit() {
    this.user$ = this.users.load(this.id);     // id уже доступен
  }
}

Порядок хуков

constructor → ngOnChanges → ngOnInit → ngDoCheck → ngAfterContentInit → ngAfterViewInit → … → ngOnDestroy.

Современный вариант

Зависимости получают через функцию inject(), а производные данные описывают через computed, поэтому логики в ngOnInit часто становится меньше.

Коротко для собеседования

В конструкторе только внедрение зависимостей, а логику, зависящую от @Input, пишут в ngOnInit.

Другие вопросы раздела