Angular > Érdemes tudnivalók dinamikus komponens létrehozásnál

 ( foofighter | 2018. november 18., vasárnap - 16:55 )

Ha a komponenst dinamikusan hozom létre ComponentRef-en keresztül, kézzel kell-e a komponensemet megszüntetni vagy ez megtörténik a szülő megszűnésével?

Ha dinamikusan hozzuk létre a komponenst és a ViewContainerRef-n keresztül inzertáljuk a view-ba, Angular minden egyes életciklus hook-ot meghívja az ngOnChanges()-on kívűl. Ez azért van, mert az ngOnChanges hook csak akkor hívódik meg, ha a view-n keresztül módosul az input, ha programozott módon akkor nem.

Egy példa dinamikus komponens létrehozásra:

hello.component.ts:

@Component({
  selector: 'hello',
  template: `Hello {{name}}!`
})
export class HelloComponent {
  _name;

  @Input() set name(name: string) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

}

parent.component.ts:

@Component({
  selector: 'app-parent',
  template: `Parent:`
})
export class ParentComponent implements OnInit {
  @ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef;

  constructor(private fr: ComponentFactoryResolver) {
    
  }

  ngOnInit() {
    const factory = this.fr.resolveComponentFactory(HelloComponent);
    const ref = this.vcr.createComponent(factory);
    ref.instance.name = 'World';
  }

}

Ebben az esetben a válasz Igen, az Angular törli a komponenst mihelyst a szülője törlődik.

Még egy fontos dolgot figyelembe kell venni, ha a komponens @Output()-jára kézzel iratkozunk fel a komponenst nekünk kell kitakarítunk, máskülönben memory leak-ünk lesz.

ex.component.ts:

import { untilDestroyed } from 'ngx-take-until-destroy';

ngOnInit() { 
  const factory = this.fr.resolveComponentFactory(HelloComponent);
  const ref = this.ref.createComponent(factory);
  ref.instance.name = 'World';
  ref.instance.someOutput.pipe(untilDestroyed(this)).subscribe(...) <======
}

Forrás:

https://netbasal.com/things-worth-knowing-about-dynamic-components-in-angular-166ce136b3eb

Hozzászólás megjelenítési lehetőségek

A választott hozzászólás megjelenítési mód a „Beállítás” gombbal rögzíthető.

Ez újfent alátámasztja nekem, hogy az Angular a kliensoldali programozásnál ugyanaz, mint szerveroldalon a PHP. Kösz, de nem.

Bocs, hogy vak vagyok kérlek akadálymentesítsd nekem az analógiát, mert nem értem

Aluldefiniált, nem a programozók általános elvárásainak (vagy éppen a dokumentációnak) megfelelő működések.

Az ngOnChanges például a dokumentációja szerint
"A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the changes."

Sehol nem szerepel az, hogy "csak akkor hívódik meg, ha a view-n keresztül módosul az input, ha programozott módon akkor nem". Pedig ez a működés szempontjából lényeges különbség.

Vagy éppen az összevisszaság.

Angular CLI dokumentációja?
Van ugyan cli.angular.io, de annak a dokumentációs linkje a Githubra mutat, ahol az eggyel régebbi főverzió dokumentációja van, a kurrens verzióé pedig az angular.io/cli oldalon található. Teljes fejetlenség. Minek az aldomain? Minek két helyen a dokumentáció (Github és weboldal)?

Agyrém.

Azt inkább nem is említem, hogy a template-kben ugynaazt a funkcionalitást 3-féle szintaxissal is el lehet érni. Próbálj meg így egységes kódbázist kialakítani.

Töredezett, nehezen tanulható, sok-sok meglepetést (dokumentációnak ellentmondó, vagy épp nem leírt viselkedést) mutató platform.

az ngOnChanges lifecycle hook nem hívódik témához:

Jogos, a dokumentáció elhallgatja, hogy dinamikus komponens létrehozásnál @Input-tal dekorált változok állításánál nem hívódik meg az ngOnChanges.
BUG: https://github.com/angular/angular/issues/8903
Kerülő megoldás: https://stackoverflow.com/questions/40610935/angular-2-dynamic-component-loading-ngonchanges-lifecycle-hook-call

Nem növeli inkább az absztrakció nagyságát ahhoz képest mint amennyit elvesz?

Részemről azt látom más keretrendszereknél, hogy nagyon nehezen valósítják meg azt, hogy úgy tudjon többet, hogy közben ne legyen bonyolultabb. Mert ugye nagyon könnyű újabb és újabb logikákat kreálni új objektumok bevezetésével. De tudnak-e úgy előre lépni, hogy csökkentik a háton cipelendő ismeretanyag mértékét? Csökken-e a meredeksége a tanulási görbének és így hoz-e összességében pozitívumot és nagyobb hatékonyságot?

Annyira faj a szememnek ahogy abuse-olod ezt a > operatort allandoan :(

Szemfájás ellen szemcseppet javaslok, a > operátor itt részhalmazt jelöl (balról jobbra)

Az meg annal is rosszabb, mint amire gondoltam.