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

Как должна быть настроена форма

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

<сильный>1. Конструктор

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

<сильный>2. Инициализатор (ngOnInit)

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

<сильный>3. Ввод изменений (ngOnChanges)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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