Directives za muundo (zile zenye *, kama *ngIf/) huibadilisha DOM kwa . ni kichezaji cha sintaksi — chini ya mfuko, Angular huzunguka element katika na directive inakamatia kama na jinsi ya kurudisha template hiyo.
Directives za muundo (zile zenye *, kama *ngIf/) huibadilisha DOM kwa . ni kichezaji cha sintaksi — chini ya mfuko, Angular huzunguka element katika na directive inakamatia kama na jinsi ya kurudisha template hiyo.
*ngFor*<ng-template><!-- 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.
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.
<!-- 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.
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.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia