Strukturální direktivy (ty s *, jako *ngIf/*ngFor) mění DOM . je syntaktický cukr — pod kapotou Angular obalí prvek v a direktiva kontroluje, zda/jak se tato šablona vykreslí.
Strukturální direktivy (ty s *, jako *ngIf/*ngFor) mění DOM . je syntaktický cukr — pod kapotou Angular obalí prvek v a direktiva kontroluje, zda/jak se tato šablona vykreslí.
*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
* říká Angularu: "obal tento prvek do šablony a nech direktivu rozhodovat, kdy jej vložit do DOM." <ng-template> je inertní kus značky, který se nevykresluje, dokud direktiva nevytvoří její instanci.
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>
Dva injektované kusy jsou klíčové: TemplateRef je šablona prvku ("co vykreslit"), a ViewContainerRef je místo v DOM ("kam"). Direktiva volá createEmbeddedView pro přidání prvku nebo clear pro jeho odstranění.
<!-- 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> }
Tato novější syntaxe je čitelnější a výkonnější, i když základní koncept přidávání/odebírání zůstává stejný.
Pochopení rozbalení * → <ng-template> objasňuje, jak *ngIf/*ngFor přidávají a odebírají DOM, a umožňuje vám vytvářet vlastní strukturální direktivy (pomocí TemplateRef + ViewContainerRef) pro pokročilou kontrolu šablon — např. vykreslování na základě oprávnění, vlastní repetery nebo opožděné vkládání.
Takéé vysvětluje, proč nemůžete umístit dvě strukturální direktivy (*ngIf a *ngFor) na jeden prvek: každá potřebuje svůj vlastní obal šablony.
Knihovna IT otázek k pohovoru s podrobnými odpověďmi — od Junior po Senior.
Přispět