Direktifin tsarin gida (waɗanda ke da *, kamar *ngIf/) suna canja DOM ta . shine sirurin syntax — jiya gida, Angular ya naɗa ɗan abuwa a cikin kuma direktifi yana sarrafa idan/yaya wannan template ana tunakanta.
Direktifin tsarin gida (waɗanda ke da *, kamar *ngIf/) suna canja DOM ta . shine sirurin syntax — jiya gida, Angular ya naɗa ɗan abuwa a cikin kuma direktifi yana sarrafa idan/yaya wannan template ana tunakanta.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* yana gaya wa Angular: "naɗa wannan ɗan abu a cikin template, kuma bari direktifi ya yanke idan/yaya ya zama DOM." <ng-template> wuri ne marasa aiki na markup waɗanda ba a tunakanta sai lokacin da direktifi ta ƙera shi.
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>
Waɗannan sassa biyu masu tuɓo sune sifa: TemplateRef shine template na ɗan abu ("me a tunakanta"), kuma ViewContainerRef shine wurin a cikin DOM ("ina"). Direktifi yana kira createEmbeddedView domin saka ɗan abu ko clear domin kawar.
<!-- 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> }
Wannan sabuwar syntax yana da kyau da karfi fiye, kodayake ainihin ƙari/kawar tunani ya dace.
Sanin desugaring * → <ng-template> yana miɗe yadda *ngIf/*ngFor suka saka kuma suka kawar da DOM, kuma yana ba ka damar gina direktifin tsarin gida na kanka (ta yin amfani da TemplateRef + ViewContainerRef) don ikon ƙari na saauƙa template — misali izini-dangantaka tunakanta, sauye mai kanta, ko tuɓe sauki.
Hakanan yana miɗe dalilin da ya sa ba zai yiwu ba in saka direktifin tsarin gida biyu (*ngIf kuma *ngFor) akan ɗan abu guda: kowannan yana bukatar nuwanta na template.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa