1.13.6.1. fejezet, életfolyamatok követése

Beküldte pzoli - 2024, október 28 - 12:00du
  • ngOnInit: A komponens konstruktora után lefutó hook, tipikusan API adat betöltésre, komplex inicializálásra használjuk. Az @Input tulajdonságok itt már be vannak állírva (ngOnChange is lefutott már), valamint a függőségi viszonyok is fel vannak oldva.
    •   async ngOnInit() {
    this.doctors = await this.doctorService.getDoctors()
  }
  • ngOnChanges: Akkor hívódik meg, amikor egy @input tulajdonság változik
    • @Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrl: './profile.component.css'
})
export class ProfileComponent implements OnChanges {
  @Input() counter = 0
 
  ngOnChanges(){
    console.log("OnChanges triggered.");
  }
}
    <app-profile [counter]="100"></app-profile>
  • ngDoCheck: minden változások meghívódik (egyedi változás érzékelésre, performancia mérésre. Sűrűn meghívódik.)
    • import {Component, DoCheck, Input} from '@angular/core';
 
@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrl: './profile.component.css'
})
export class ProfileComponent implements DoCheck {
  counter = 0
 
  incCounter() {
    this.counter++;
  }
 
  decCounter() {
    this.counter--;
  }
 
  ngDoCheck(): void {
    console.log("ngDoCheck component changed")
  }
}
  • ngAfterContentInit: meghívódik amikor a komponens tartalma inicializálódott (ng-content - Content Projection). Ez csak egyszer történik meg a komponens életciklusában.
  • ngAfterContentChecked: meghívódik minden alkalommal, amint a komponens tartalma változik (ng-content - Content Projection)
  • ngAfterViewInit: meghívódik amint a komponens teljesen kiíródik a nézetbe (és a DOM teljesen felépült). Ez csak egyszer történik meg a komponens életciklusában.
  • ngAfterViewChecked: meghívódik minden alkalommal, amint a megváltozott komponens teljesen felépült (és a DOM teljesen felépült)
  • ngOnDestroy: minden megszűnés előtt meghívódik