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

Доступные хуки жизненного цикла:

ngOnInit

Вызывается один раз, после того как Angular создал компонент и его дочерние компоненты. Это идеальное место для инициализации данных.

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

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

@Component({
  selector: 'app-example',
  template: `<h1>{{title}}</h1>`,
})
export class ExampleComponent implements OnInit {
  title: string;

  constructor() {
    // Этот код выполнится до создания компонента.
  }

  ngOnInit() {
    this.title = 'Привет, мир!';
    // Здесь мы можем выполнять любую необходимую инициализацию.
  }
}

ngOnChanges

Вызывается каждый раз, когда одно из входных свойств (input properties) компонента изменяется. Это позволяет вам реагировать на изменения данных.

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

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

@Component({
  selector: 'app-child',
  template: `<p>Данные: {{data}}</p>`,
})
export class ChildComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log('Изменения:', changes);
    // Здесь мы можем обрабатывать изменения входных данных.
  }
}

ngDoCheck

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

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

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

@Component({
  selector: 'app-check',
  template: `<p>Содержимое: {{content}}</p>`,
})
export class CheckComponent implements DoCheck {
  content: string = 'Изменить это';

  ngDoCheck() {
    console.log('ngDoCheck был вызван');
    // Здесь можно реализовать кастомную логику проверки.
  }
}

ngAfterContentInit

Вызывается после того, как Angular вставил содержимое (content) в компонент.

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

import { Component, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-content',
  template: `<ng-content></ng-content>`,
})
export class ContentComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log('Содержимое инициализировано.');
  }
}

ngAfterViewInit

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

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

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

@Component({
  selector: 'app-view',
  template: `<div #myDiv>Привет</div>`,
})
export class ViewComponent implements AfterViewInit {
  ngAfterViewInit() {
    console.log('Представление инициализировано.');
  }
}

ngOnDestroy

Вызывается перед уничтожением компонента. Это хорошее место для очистки ресурсов и отписки от подписок.

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

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

@Component({
  selector: 'app-destroy',
  template: `<p>Я могу быть уничтожен.</p>`,
})
export class DestroyComponent implements OnDestroy {
  ngOnDestroy() {
    console.log('Компонент будет уничтожен.');
    // Здесь можно выполнить необходимую очистку.
  }
}

Заключение

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

Предыдущий вопрос

Какие ключевые компоненты Angular?

Следующий вопрос

Какие хуки жизненного цикла зоны?

Содержание:

Доступные хуки жизненного цикла:

Заключение

Редактировать