markForCheck и detectChanges

markForCheck и detectChanges - это два метода из ChangeDetectorRef, который является сердцем системы обнаружения изменений в Angular. Оба метода используются для управления обнаружением изменений и обновления представления компонента. Давайте рассмотрим каждый из них подробнее:

  1. markForCheck: Метод markForCheck помечает компонент и его дочерние компоненты для проверки изменений при следующей проверке цикла обнаружения изменений. Это означает, что Angular будет перепроверять компонент и его дочерние компоненты, чтобы обнаружить и применить любые изменения данных, которые могли произойти. Однако сама проверка изменений не происходит немедленно после вызова markForCheck. Вместо этого Angular отложит проверку до ближайшего цикла обнаружения изменений.

    Пример использования markForCheck:

    import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'

@Component({
	selector: 'app-example',
	template: `
		<h1>{{ data }}</h1>
		<button (click)="updateData()">Update Data</button>
	`,
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
	data: string

	constructor(private cdr: ChangeDetectorRef) {}

	updateData() {
		this.data = 'Updated Data'
		this.cdr.markForCheck()
	}
}

    В приведенном примере, при клике на кнопку "Update Data", мы обновляем значение data и затем вызываем метод markForCheck, чтобы сообщить Angular о необходимости проверить компонент на наличие изменений. При следующей проверке цикла обнаружения изменений Angular обнаружит изменения и обновит представление компонента.

  2. detectChanges: Метод detectChanges явно запускает проверку изменений и обновление представления компонента в текущем цикле обнаружения изменений. Он принудительно применяет любые изменения данных в компоненте и его дочерних компонентах без ожидания следующего цикла обнаружения изменений. Это может быть полезно, если вы хотите обновить представление компонента немедленно, например, в ответ на асинхронные события.

    Пример использования detectChanges:

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

@Component({
	selector: 'app-example',
	template: `
		<h1>{{ data }}</h1>
		<button (click)="updateData()">Update Data</button>
	`
})
export class ExampleComponent {
	data: string

	constructor(private cdr: ChangeDetectorRef) {}

	updateData() {
		this.data = 'Updated Data'
		this.cdr.detectChanges()
	}
}

    В этом примере при клике на кнопку "Update Data" мы обновляем значение data и затем вызываем метод detectChanges, чтобы немедленно применить изменения и обновить представление компонента.

В общем, markForCheck и detectChanges оба позволяют управлять обнаружением изменений и обновлением представления в Angular. markForCheck предоставляет более оптимальный способ отложенной проверки изменений, в то время как detectChanges немедленно применяет изменения. Выбор между ними зависит от конкретного случая использования и требований вашего приложения.