Directives za muundo zinavyofanya kazi chini ya mfuko?

Directives za muundo (zile zenye *, kama *ngIf/*ngFor) huibadilisha DOM kwa kuongeza au kuondoa elements. * ni kichezaji cha sintaksi — chini ya mfuko, Angular huzunguka element katika <ng-template> na directive inakamatia kama na jinsi ya kurudisha template hiyo.

Kuondoa pamba kutoka *

<!-- what you write -->
<p *ngIf="isVisible">Hello</p>

<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
  <p>Hello</p>
</ng-template>

* inasema kwa Angular: "zungusha element hii katika template, na acha directive ichague wakati wa kuibandika katika DOM." <ng-template> ni kipande cha markup ambacho hakina maisha hadi directive ikapounda kwa mara.

Kujenga directive ya muundo iliyobadilishwa

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({ selector: "[appUnless]" }) // *appUnless = "the opposite of ngIf"
export class UnlessDirective {
  constructor(
    private templateRef: TemplateRef<any>,      // the wrapped <ng-template>
    private viewContainer: ViewContainerRef,    // where to render it
  ) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef); // render it
    } else {
      this.viewContainer.clear();                               // remove it
    }
  }
}
// usage: <p *appUnless="isHidden">Shown when isHidden is false</p>

Sehemu mbili zilizoingia ni muhimu: TemplateRef ni template ya element ("kile cha kurudisha"), na ViewContainerRef ni mahali katika DOM ("mahali"). Directive inaita createEmbeddedView kuongeza element au clear kuiondoa.

Mtiririko wa sasa wa @if/@for udhibiti

<!-- newer Angular replaces *ngIf/*ngFor with built-in block syntax -->
@if (isVisible) { <p>Hello</p> } @else { <p>Hidden</p> }
@for (item of items; track item.id) { <li>{{ item.name }}</li> }

Syntaksi hii mpya ni rahisi na haraka zaidi, ingawa wazo la kuongeza/kuondoa hili ni sawa.

Kwa nini kimaanisha

Kuelewa kuondoa pamba * → <ng-template> kunafafanuia jinsi *ngIf/*ngFor ongeza na kuondoa DOM, na kukuruhusu kujenga directives maalum ya muundo (kwa kutumia TemplateRef + ViewContainerRef) kwa ajili ya udhibiti wa template wa juu — k.m. kurudisha kulingana na ruhusa, wanaweza kurudia, au kubanikiza haraka.

Inasadiki pia kwa nini huwezi kuweka directives mbili za muundo (*ngIf na *ngFor) kwenye element moja: kila moja inahitaji orodhani yake mwenyewe ya template.