Жизненный цикл компонента Angular
Жизненный цикл компонента Angular

Жизненный цикл компонента Angular

Front-end 06.07.2020

В Angular компоненты имеют свой жизненный цикл (lifecycle) от создания компонента и до его удаления, который разделяется на конкретные фазы. Фреймворк даёт возможность получить доступ к каждой фазе жизненного цикла при помощи методов – хуков (Lifecycle Hooks) и повлиять на компонент в конкретный этап его жизненного цикла.

Каждый такой метод определен в отдельном интерфейсе, например, метод ngOnInit определен в интерфейсе OnInit, то-есть для того, чтобы использовать Lifecycle Hooks, первым делом нужно подключить интерфейсы в компонент таким образом:

export class MyComponent implements OnInit {
    constructor() { }
    ngOnInit() {
        // Custom Logic
    }
}

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

Name
1 ngOnChanges
2 ngOnInit
3 ngDoCheck
4 ngAfterContentInit
5 ngAfterContentChecked
6 ngAfterViewInit
7 ngAfterViewChecked
8 ngOnDestroy

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

export class MyComponent implements OnChanges {
  @Input userInfo: UserInfo;
  ngOnChanges(changes: SimpleChanges) {
    const previousValue = changes['userInfo'].previousValue;
    const currentValue = changes['userInfo'].currentValue;
    ...
  }
}

ngOnInit – вызывается один раз на протяжении жизненного цикла компонента после первой установки свойств и выполняет инициализацию компонента. Здесь вы можете задать запросы серверу на загрузку контента, установить подписки и многое другое.

export class MyComponent implements OnInit {
  public formGroup: FormGroup;
  private _userType: UserTypeEnum;
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _myService: MyService
  ) {
    this._userType =
      this._activatedRoute.snapshot.paramMap.get('userType');
  }
  ngOnInit() {
    this._myService.getFormFieldsByType(
      this._userType
    ).subscribe((response) => {
      this.formGroup = this._createForm(
        response.data
      );
    }, (error) => console.error( error ) );
  }
}

Вы можете задаться вопросом, зачем нам ngOnInit, если у нас есть constructor, но стоит отметить, что constructor лучше использовать для маленького количества логики, например для внедрения зависимостей, а логику для инициализации компонента переносить в ngOnInit. Это связано с некоторыми причинами – во-первых constructor обрабатывается движком Javascript, а не фреймворком Angular,  а во-вторых в constructor свойства Inputs еще не доступны, в отличии от ngOnInit.

ngDoCheck – вызывается при каждой проверке изменений свойств компонента.

export class MyComponent implements DoCheck {
  ...
  private _currentValue;
  private _previousValue;
  public changeDetected: boolean = false;
  ...
  ngDoCheck() {
    if (this._previousValue !== this._currentValue) {
      this.changeDetected = true;
    }
  }
}

AfterContent и AfterView хуки относятся к дочерним компонентам, чьи теги элементов отображаются в шаблоне текущего компонента.

ngAfterContentInit – вызывается один раз после вставки содержимого в представление компонента кода html. Здесь мы имеем доступ к ElementRef в ContentChild после того, как Angular уже спроецировал внешний контент в компонент view.

@Component({
  selector: 'my-component',
  template: `
    <div>
      <ng-content></ng-content>
    </div>`
})
export class MyComponent implements AfterContentInit {
  @ContentChild('content') content: ElementRef;

  ngAfterContentInit() {
    // Now we have access to 'this.content'!
  }
}

ngAfterContentChecked – вызывается при проверке изменений содержимого, которое добавляется в представление компонента после метода ngAfterContentInit() и после каждого последующего вызова метода ngDoCheck().

ngAfterViewInit – вызывается после инициализации представления компонента, а также представлений дочерних компонентов. Вызывается только один раз сразу после первого вызова метода ngAfterContentChecked.

ngAfterViewChecked – вызывается после проверки на изменения в представлении компонента, а также проверки представлений дочерних компонентов. Вызывается после первого вызова метода ngAfterViewInit и после каждого последующего вызова ngAfterContentChecked.

Методы ngAfterViewInit и ngAfterViewChecked схожи с ngAfterContentInit и ngAfterContentChecked лишь с тем различием, что первые два вызываются после полной инициализации шаблона.

ngOnDestroy – вызывается перед тем, как Angular удалит элемент. В этом методе можно освобождать те используемые ресурсы, которые не удаляются автоматически сборщиком мусора, например, подписку на какие-то события элементов DOM, останавливать таймеры и т.д. чтобы избежать утечек памяти.

export class MyComponent implements OnDestroy {
  private _mySubject: Subject = new Subject();
  ...
  ngOnDestroy() {
    localStorage.removeItem('storageKey');
    this._searchSubject.unsubscribe();
  }
}

Источники: angular.io, angular-university.io, bitsrc.io, thoughtram.io, habr.com, www.coldfox.ru, bxnotes.ru, itnext.io, metanit.com

Поделиться

Отправить ответ

avatar
  Получать новые комментарии  
Уведомлять о новых комментариях