1.13.6. fejezet, Lifecycle hooks

Beküldte pzoli - 2024, október 26 - 8:55du

Életút követés

Egy komponensnek a létrehozásától a megszűnéséig követhető az életútja, és ezeknél egyedi műveletek alkalmazhatóak. Ezek az állomások a következők:

  • Inicializálás (ngOnInit, ngAfterContentInit, ngAfterViewInit)
  • Változás detektálás (ngOnChanges, ngDoCheck, ngAfterContentChecked, ngAfterViewChecked)
  • Cleanup (pl.: függő komponensek felszabadítása; ngOnDestroy)

Komponens programozott leképezése

user.component.html

<div *ngComponentOutlet="loadComponent()"></div>

user.component.ts

  loadComponent() {
    return DoctorComponent
  }

Komponens létrehozása és törlése gombnyomásra

user.component.html

<button (click)="createDoctorComponent()">Create component</button>
<button (click)="removeDoctorComponent()">Remove component</button>

user.component.ts

import {Component, ViewContainerRef} from '@angular/core';
import {DoctorComponent} from '../doctor/doctor.component';
 
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrl: './user.component.css'
})
export class UserComponent {
 
  constructor(private viewContener: ViewContainerRef) {
  }
 
  createDoctorComponent() {
    this.viewContener.createComponent(DoctorComponent)
  }
 
  removeDoctorComponent() {
    this.viewContener.remove()
  }
}