Structural Directives

სტრუქტურული დირექტივები HTML-ის განლაგებაზე არიან პასუხისმგებელნი. კერძოდ, ისინი ფორმას უცვლიან DOM-ის სტრუქტურას, ამატებენ ან შლიან ელემენტებს. მე-17 ვერსიიდან იგივე დანიშნულებისთვის შეგვიძლია გამოვიყენოთ Control Flow თემფლეითის სინტაქსი.

ამ თავში ვისაუბრებთ NgIf და NgFor დირექტივებზე.

სტრუქტურული დირექტივები CommonModule-ის ნაწილს წარმოადგენენ, ამიტომ შეგიძლიათ პირდაპირ ეს მოდული დაამატოთ კომპონენტის იმპორტების სიაში.

NgIf

NgIf დირექტივი host ელემენტს შექმნის ან წაშლის DOM-ში, იმის მიხედვით, თუ რა მნიშვნელობას დააბრუნებს დირექტივისთვის მიწოდებული ექსფრეშენი.

<button (click)="isActive = !isActive">toggle</button>
<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>

კომპონენტის კლასში გვაქვს isActive თვისება, რომლის მნიშვნელობაც არსებულის საპირისპირო ხდება ღილაკზე დაჭერისას. NgIf დირექტივში მიწოდებული ექსფრეშენი მაშასადამე იცვლება და ეს კომპონენტს აჩენს ან აქრობს. კომპონენტის შემთხვევაში NgIf დირექტივი მეხსიერებიდან მთლიანად შლის კოპმონენტს და მასში არსებულ შვილებს მთელი თავისი მონაცემებით, რათა მეხსიერება გათავისუფლდეს. აქედან გამომდინარე, გაჩენის შემთხვევაში host კომპონენტი ხელახლა იქმნება. რა თქმა უნდა, NgIf დირექტივი უბრალო HTML ელემენტებზეც მუშაობს.

NgFor

NgFor დირექტივი გამოიყენება მასივების ელემენტების გამოსახვისთვის. ჩვენ ჯერ ერთ HTML-ის ბლოკს განვსაზღვრავთ, რათა ანგულარმა იცოდეს თითო ელემენტი როგორ უნდა დარენდერდეს და ელემენტზე ვიყენებთ დირექტივს, სადაც for of loop-ის ექსფრეშენს ვაწვდით:

<app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>

აქ ყოველ იტერაციაზე item ცვლადში ინახება items მასივში არსებული ელემენტი, რომელიც გადაეცემა host კომპონენტს. NgFor ის host ბლოკში ეს ცვლადი ყველგან არის ხელმისაწვდომი.

<div *ngFor="let item of items">
  <h3>{{ item. name }}</h3>
  <p>{{ item.description }}</p>
</div>

ჩვენ შესაძლებლობა გვაქვს ოპტიმიზაცია გავუკეთოთ მასივის დარენდერებას, დირექტივში trackby-ს განსაზღვრით. ამისათვის კლასში გვჭირდება TrackByFunction ტიპის (@angular/core-დან) ფუნქციის შექმნა:

itemTrackBy(index, item) {
  return item.name
}

პირველ არგუმენტად ველოდებით მასივის ელემენტის ინდექსს, ხოლო მეორე არგუმენტად - უშუალოდ იმ ობიექტს, რომელიც ლუპის თითოეული იტერაციაში ბრუნდება. ამ ფუნქციამ უნდა დააბრუნოს ობიექტის რაიმე უნიკალური თვისება, რომლითაც ანგულარი ამ ობიექტებს ერთმანეთისგან გაარჩევს.

შემდეგ თემფლეითში, NgFor დირექტივში ;-ით გამოვწყოფთ ახალ ექსფრეშენს და ვამატებთ ამ ფუნქციას trackBy-ს არგუმენტად:

<div *ngFor="let item of items; trackBy: itemTrackBy">
  <h3>{{ item.name }}</h3>
  <p>{{ item.description }}</p>
</div>

ასე ანგულარი DOM-ში მხოლოდ იმ სპეციფიკურ ელემენტს განაახლებს, რომელიც მასივში შეიცვალა, რაც რესურსებს დაგვიზოგავს.

შეჯამება

ამ თავში ჩვენ განვიხილეთ სტრუქტურული დირექტივები, რომლებიც ცვლიან იმას, თუ როგორ რენდერდება ელემენტი. NgIf დირექტივი რაღაც პირობის მიხედვით ელემენტს შექმნის ან წაშლის. NgFor დირექტივით ჩვენ ერთგვარი ლუპის საშუალებით შეგვიძლია მასივებში არსებული ინფორმაციის გამოსახვა.