Одна из самых запутанных вещей при создании компонента Angular - это решить, что поместить в конструктор, а что - в метод ngOnInit. Оба эти метода используются для аналогичных целей, оба срабатывают один раз в начале жизненного цикла компонента, поэтому знание того, что размещать, может быть проблематичным. В этой статье мы разберем, когда использовать каждый метод, и почему, и что использовать в них, а что НЕ использовать.

Во-первых, давайте разберемся, что делает каждый метод и когда он запускается.

Конструктор важен в компоненте по двум причинам. Во-первых, это метод жизненного цикла, то есть он вызывается при создании компонента, поэтому он имеет важную цель: если вы хотите, чтобы конкретный код запускался в определенное время (во время создания), то это подходящее место для сделай это. Во-вторых, это место, где вы внедряете сервисы в компонент. Это выглядит так:

Обратите внимание на использование TypeScript здесь. Сначала мы используем ключевое слово private, чтобы сохранить ссылку на нашу службу акторов. Во-вторых, мы набираем переменную «actorService »с типом« ActorService », чтобы Angular знал, какой сервис нам нужен.

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

И создание, и инициализация происходят в очень похожие периоды жизненного цикла компонента. И мы часто хотим, чтобы определенные типы кода выполнялись, когда наш компонент «создан».

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

Так следует ли нам делать это во время создания или инициализации?

Конструкция происходит, когда создается класс JavaScript. По сути, это первое, что может случиться с экземпляром класса. С другой стороны, инициализация происходит после того, как компонент полностью инициализирован. По сути, это означает, что когда Angular завершит соединение всех частей вместе.

Используя эти знания, теперь мы можем рассмотреть передовой опыт использования этих двух методов: что следует использовать в каждом, а что нет.

Строительство - это первое, но происходит, когда компонент еще не является компонентом. Поэтому конструктор должен содержать только очень простой код, относящийся к базовой инициализации класса. У вас будут введенные услуги, но это все. Поэтому обычно мы помещаем только простой быстрый код, такой как инициализация состояния. Хотя обычно проще инициализировать те свойства, где они объявлены, если это возможно.

Итак, сделайте это:

Вместо этого:

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

С другой стороны, метод ngOnInit срабатывает, когда компонент готов стать компонентом и готов приступить к работе. Следовательно, по умолчанию здесь должен быть размещен практически весь код запуска. Будь то вызовы HTTP, вызовы зависимых служб или другие подобные элементы. Мы даже можем поместить сюда нашу инициализацию начального состояния, и это нормально. Нет недостатка в том, чтобы поместить его здесь, а не в конструктор.

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

ngOnInit gotcha:

У метода ngOnInit есть одна проблема. И это значит, что даже если мы изменим маршруты, если мы используем один и тот же компонент как для предыдущего, так и для текущего маршрута, то метод ngOnInit больше не запускается.

Это обычно происходит при просмотре деталей элемента в списке с использованием компонента в качестве детального представления, например, деталей актера, и если в этом представлении есть ссылки «следующий субъект» и «предыдущий субъект». Затем щелчок по этим ссылкам для просмотра сведений о другом актере может изменить маршрут, но не вызывает повторного срабатывания метода ngOnInit. Так что будьте осторожны в этом случае.

Чтобы узнать больше о конструкторах и методе ngOnInit, ознакомьтесь с моим совершенно бесплатным курсом Основы Angular на Thinkster.io.

Удачного кодирования!

Подпишитесь на мою рассылку здесь.

Приходите к нам: thinkster.io | Facebook: @gothinkster | Twitter: @GoThinkster