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

Главная » Видеоуроки » JavaScript » Angular. Жизненный цикл компонента

Каждый angular компонент имеет свой жизненный цикл. Жизненный цикл включает в себя несколько необязательных методов, которые вы можете реализовать для реагирования на какие-либо события в компоненте.

Для описания методов жизненного цикла (хуков) необходимо реализовать интерфейс, содержащий этот метод. Есть несколько интерфейсов OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy. При реализации интерфейса в классе Angular потребует реализовать метод этого интерфейса (см. код).

Код урока (user.component.ts)
import {
  AfterContentChecked,
  AfterContentInit, AfterViewChecked, AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  DoCheck,
  Input,
  OnChanges, OnDestroy,
  OnInit,
  SimpleChanges
} from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  @Input() user: string = '';
  fullName: string = '';

  constructor() {
    console.log(this);
  }
  
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
  
  ngOnInit(): void {
    console.log('on init');
  }
  
  ngDoCheck() {
    console.log('do check');
  }
  
  ngAfterContentInit() {
    // console.log('call after content init');
  }
  
  ngAfterContentChecked() {
    // console.log(this.user, this.fullName);
  }
  
  ngAfterViewInit() {

  }
  
  ngAfterViewChecked() {

  }

  ngOnDestroy() {
  }

  changeUser() {
    // this.user = 'my user';
    this.fullName = 'full name';
  }

}

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This