Методы жизненного цикла Angular компонента?

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

Вот основные методы жизненного цикла Angular компонента:

constructor: Это первый метод, который вызывается при создании экземпляра компонента. В нём обычно выполняется инициализация свойств компонента и внедрение зависимостей. Пример:

import { Component } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '...'
})
export class MyComponent {
	constructor() {
		console.log('Constructor called')
	}
}

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

import { Component, Input, SimpleChanges } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '...'
})
export class MyComponent {
	@Input() name: string

	ngOnChanges(changes: SimpleChanges) {
		console.log('ngOnChanges called')
		console.log(changes)
	}
}

ngOnInit: Этот метод вызывается после того, как компонент и его привязки инициализированы. Он является идеальным местом для выполнения инициализации данных или получения данных через сервисы. Пример:

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

@Component({
	selector: 'app-my-component',
	template: '...'
})
export class MyComponent implements OnInit {
	ngOnInit() {
		console.log('ngOnInit called')
		// Инициализация данных или вызов сервисов
	}
}

ngDoCheck: Этот метод вызывается при каждой проверке изменений в компоненте и его дочерних компонентах. Он позволяет обнаруживать и реагировать на изменения, которые не были замечены автоматическим механизмом обнаружения изменений Angular. Пример:

import { Component, DoCheck } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '...'
})
export class MyComponent implements DoCheck {
	ngDoCheck() {
		console.log('ngDoCheck called')
		// Обнаружение и реагирование на изменения
	}
}

ngAfterViewInit: Этот метод вызывается после инициализации представления компонента и его дочерних представлений. Он используется для выполнения операций, которые требуют доступа к DOM-элементам или инициализации сторонних библиотек. Пример:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core'

@Component({
	selector: 'app-my-component',
	template: '<div #myDiv></div>'
})
export class MyComponent implements AfterViewInit {
	@ViewChild('myDiv') myDiv: ElementRef

	ngAfterViewInit() {
		console.log('ngAfterViewInit called')
		console.log(this.myDiv.nativeElement)
		// Доступ к DOM-элементам или инициализация сторонних библиотек
	}
}

ngOnDestroy: Этот метод вызывается перед уничтожением компонента. Он используется для выполнения очистки ресурсов, отписки от подписок, отмены таймеров и других операций, связанных с завершением работы компонента. Пример:

import { Component, OnDestroy } from '@angular/core'
import { Subscription } from 'rxjs'

@Component({
	selector: 'app-my-component',
	template: '...'
})
export class MyComponent implements OnDestroy {
	private subscription: Subscription

	ngOnDestroy() {
		console.log('ngOnDestroy called')
		this.subscription.unsubscribe()
		// Очистка ресурсов и отмена подписок
	}
}

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

Little Angular programmer's library

Методы жизненного цикла Angular компонента?