Οι δομικές οδηγίες (αυτές με *, όπως *ngIf/) αλλάζουν το DOM . Το είναι συντακτική ζάχαρη — κάτω από το καπό, το Angular τυλίγει το στοιχείο σε ένα και η οδηγία ελέγχει αν/πώς αυτό το πρότυπο θα αποδοθεί.
Οι δομικές οδηγίες (αυτές με *, όπως *ngIf/) αλλάζουν το DOM . Το είναι συντακτική ζάχαρη — κάτω από το καπό, το Angular τυλίγει το στοιχείο σε ένα και η οδηγία ελέγχει αν/πώς αυτό το πρότυπο θα αποδοθεί.
*ngFor*<ng-template><!-- what you write -->
<p *ngIf="isVisible">Hello</p>
<!-- what Angular actually does -->
<ng-template [ngIf]="isVisible">
<p>Hello</p>
</ng-template>
Το * λέει στο Angular: "τυλίξτε αυτό το στοιχείο σε ένα πρότυπο, και αφήστε την οδηγία να αποφασίσει πότε θα το σφραγίσει στο DOM." Ένα <ng-template> είναι ένα αδρανές κομμάτι σήμανσης που δεν αποδίδεται μέχρι μια οδηγία να το δημιουργήσει.
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>
Τα δύο ενδυμένα κομμάτια είναι το κλειδί: TemplateRef είναι το πρότυπο του στοιχείου (το "τι να αποδοθεί"), και ViewContainerRef είναι η τοποθεσία στο DOM (το "πού"). Η οδηγία καλεί createEmbeddedView για να προσθέσει το στοιχείο ή clear για να το αφαιρέσει.
<!-- 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> }
Αυτή η νεότερη σύνταξη είναι πιο ευανάγνωστη και αποδοτική, αν και η υποκείμενη προσθήκη/αφαίρεση έννοια είναι η ίδια.
Η κατανόηση της αποζαχάρωσης * → <ng-template> ξεκαθαρίζει πώς *ngIf/*ngFor προσθέτουν και αφαιρούν το DOM, και σας επιτρέπει να δημιουργήσετε προσαρμοσμένες δομικές οδηγίες (χρησιμοποιώντας TemplateRef + ViewContainerRef) για προχωρημένο έλεγχο προτύπων — π.χ. απόδοση βάσει δικαιωμάτων, προσαρμοσμένες επαναλήψεις ή τεμνόμενη σφραγίδα.
Έχει επίσης σαφές γιατί δεν μπορείτε να τοποθετήσετε δύο δομικές οδηγίες (*ngIf και *ngFor) σε ένα στοιχείο: κάθε μία χρειάζεται τη δική της περικάλυψη προτύπου.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά