Direktif struktur (yang mempunyai *, seperti *ngIf/) mengubah DOM dengan . adalah gula sintaksis — di bawah permukaan, Angular membungkus elemen dalam dan direktif mengawal sama ada/bagaimana templat itu dirender.
Direktif struktur (yang mempunyai *, seperti *ngIf/) mengubah DOM dengan . adalah gula sintaksis — di bawah permukaan, Angular membungkus elemen dalam dan direktif mengawal sama ada/bagaimana templat itu dirender.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* memberitahu Angular: "bungkus elemen ini dalam templat, dan biarkan direktif memutuskan bila membuang ke DOM." <ng-template> adalah sekeping markup yang tidak aktif yang tidak dirender sehingga direktif menginstannya.
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>
Dua kepingan yang disuntik adalah kunci: TemplateRef ialah templat elemen ("apa yang hendak dirender"), dan ViewContainerRef ialah lokasi dalam DOM ("tempat mana"). Direktif memanggil createEmbeddedView untuk menambah elemen atau clear untuk mengeluarkannya.
<!-- 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> }
Sintaksis yang lebih baru ini lebih mudah dibaca dan berprestasi, walaupun konsep tambah/keluarkan yang mendasar adalah sama.
Memahami desugaring * → <ng-template> menjelaskan bagaimana *ngIf/*ngFor menambah dan mengeluarkan DOM, dan membolehkan anda membina direktif struktur tersuai (menggunakan TemplateRef + ViewContainerRef) untuk kawalan templat lanjutan — contohnya, rendering berasaskan kebenaran, pengulang tersuai, atau setem malas.
Ia juga menjelaskan mengapa anda tidak boleh meletakkan dua direktif struktur (*ngIf dan *ngFor) pada satu elemen: setiap satu memerlukan pembungkus templat sendiri.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma