სტრუქტურული დირექტივები (ის, რომლებსაც აქვთ *, როგორიცაა *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> desugaring-ის გაგება ნათელი ხდის თუ როგორ ამატებს და ამოაქვს *ngIf/*ngFor DOM-ს, და საშუალებას გიძლევთ აიგოთ მოწვევილი სტრუქტურული დირექტივები (გამოიყენებთ TemplateRef + ViewContainerRef) მოწინავე შაბლონის კონტროლისთვის — მაგალითად, თანხმობაზე დაფუძნებული რენდერი, მოწვევილი რეპიტერი ან ზარი დიდხელი.
ასევე ნათელი ხდება, რატომ არ შეგიძლიათ ორი სტრუქტურული დირექტივის (*ngIf და *ngFor) დაყენება ერთ ელემენტზე: თითოეულს უნდა ჰქონდეს საკუთარი შაბლონის გარსი.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა