В чем разница между Angular ngOnInit () и ngOnChanges ()?

Question

Angular предоставляет хук жизненного цикла ngOnInit () и ngOnChanges () по умолчанию.Зачем использовать ngOnInit, если у нас уже есть ngOnChanges?И конструктор тоже.

Answer 1

ngOnInit и ngOnChanges - это функции, принадлежащие к группам методов жизненного цикла компонента, и они выполняются в другой момент нашего компонента (поэтому и называют жизненным циклом).Вот список всех из них:

Answer 2

Как нужно настроить форму

0.Статический дизайн HTML-разметка должна содержать структуру и структуру дизайна.Любые постоянные классы должны применяться непосредственно в разметке.

1.Конструктор

Настройка зависимостей, таких как службы, поставщики, конфигурация и т. Д. Они позволяют компоненту управлять собой вместе с другими элементами.

2.Initializer (ngOnInit)

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

3.Изменения ввода (ngOnChanges)

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

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

Это часто выполняется рекурсивно, если один элемент управления влияет на другие, поэтому необходимо тщательно продумать логику.

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

4.Обработчики событий элемента управления Здесь вы берете конечное значение элемента управления и используете его для выполнения манипуляций с другими элементами управления в форме.Как только вы измените значение других элементов управления, событие ngOnChanges снова запускается.

Answer 3

ngOnChanges () вызывается всякий раз, когда изменяются входные свойства его компонента, он получает объект SimpleChanges, который содержит измененное и предыдущее свойство.

ngOnInit () используется для инициализации объектов в компоненте, в отличие от ngOnChanges() вызывается только один раз и после первого ngOnChanges ().

Answer 4

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

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

Answer 5

Чтобы он был очень коротким.

ngOnInit() используется для выполнения любого фрагмента кода только один раз (например, для извлечения данных при загрузке).

ngOnChanges() будетвыполняется при каждом @Input() изменении свойства.

Если вы хотите выполнить какой-либо компонентный метод, основанный на изменении значения @Input(), то вы должны написать такую ​​логику внутри ngOnChanges().

Когда вы заявляете, зачем нам нужен ngOnInit(), когда у нас есть ngOnChanges(),, это потому, что вы не можете выполнить один временной код при каждом изменении свойства @Input().И вы не можете использовать constructor в качестве замены ngOnInit().Потому что это не является частью ловушки углового жизненного цикла.

Я думаю, вы получите справедливое представление об этом Разнице между OnInit и конструктором