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 Comments