Control Flow
Control Flow
ანგულარის მე-17 ვერსიიდან საშუალება გვაქვს, რომ სტრუქტურული დირექტივების
მაგივრად გამოვიყენოთ ახალი control flow სინტაქსი, რომლითაც ვმართავთ თემფლეითში
რა უნდა გამოჩდეს და როგორ უნდა გამოჩნდეს. ამ სინტაქსის ქივორდები @
სიმბოლოთი იწყება
და ძალიან ჰგავს ჯავასკრიპტის სტანდარტული if/else/switch/for
სინტაქსს.
გაითვალისწინეთ, რომ ეს control-flow არის development preview-ში. ანუ ანგუალრის ახალ ვერსიებში მისი გამოყენების და ფუნქციონირების სპეციფიკა შეიძლება შეიცვალოს.
@if
ბლოკი
@if
ბლოკი მიწოდებული პირობის ჭეშმარიტების მიხედვით გამოაჩენს მის ბლოკში
არსებულ კონტენტს.
დავუშვათ კლასში ვინახავთ ორ თვისებას:
a = 1121;
a = 1118;
თემფლეითში ამ ცვლადებისგან შეგვიძლია პირობითი ექსფრეშენის შედგენა:
@if (a > b) {
<p>{{a}} is greater than {{b}}</p>
}
როგორც ჯავასკრიპტის if
ბლოკს, ანგულარის თემფლეითში @if
-ს შეგვიძლია
მოვაყოლოთ @else
ახალი პირობით ან პირობის გარეშე:
@if (a > b) {
<p>{{a}} is greater than {{b}}</p>
} @else if (b > a) {
<p>{{a}} is less than {{b}}</p>
} @else {
<p>{{a}} is equal to {{b}}</p>
}
ექსფრეშენის შედეგის ცვლადად გამოტანა
ხშირად რაღაც ექსფრეშენის შედეგი (მაგალითად Observable
-ის შედეგი) გვინდა
რომ თემფლეითის ცვლადში შევინახოთ. @if
-ში ეს შემდეგნაირად შეგვიძლია:
@if (users$ | async; as users) {
{{ users.length }}
}
@for
ბლოკი
მასივის თითოეული ელემენტის დასარენდერებლად ვიყენებთ @for
ბლოკს, რომელიც ჰგავს
ჯავასკრიპტის for of
სინტაქსს.
დავუშვათ, რომ კომპონენტის კლასში ვინახავთ შემდეგ მასივს:
items = [
{ name: "ტარიელ", id: "0142"},
{ name: "ავთანდილ", id: "0153"},
{ name: "ფრიდონ", id: "0294"},
]
თუ თემფლეითში მათი სიაში გამოსახვა გვჭირდება:
<ul>
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ul>
ყურადღება მიაქციეთ, რომ აქ track
ექსფრეშენი სავალდებულოა.
ეს უკანასკნელი არის NgFor
დირექტივის trackBy
ფუნქციის ალტერნატივა.
ჩვენ შეგვიძლია თემფლეითშივე მივუთითოთ რის მიხედვით განასხვავოს
ანგულარმა მასივის ელემენტები ერთმანეთისგან. ამ მაგალითში
თითოეულ item
-ს პირობითად გააჩნია უნიკალური id
ატრიბუტი.
თუ უნიკალური ატრიბუტი არ გვაქვს, შეგვიძლია trackBy
-ს პირდაპირ იტერაციის ამჟამინდელი ერთეული მივაწოდოთ:
@for (item of items; track item) {
<li>{{ item.name }}</li>
}
$index
და სხვა იპმლიციტური ცვლადები
@for
ბლოკის შიგნით საშუალება გვაქვს გამოვიყენოთ იმპლიციტური ცვლადები,
რომელსაც ანგულარი ლუპში გვაწვდის, მაგალითად $index
:
<ul>
@for (item of items; track item.id) {
<li>{{ item.name }} {{$index}}</li>
}
</ul>
იმპლიციტური ცვლადების ჩამონათვალი:
$count
- მასივში არსებული ელემენტების რაოდენობა$index
- მიმდინარე იტერაციის ინდექსი$first
- მიმდინარე იტერაცია არის თუ არა პირველი$last
- მიმდინარე იტერაცია არის თუ არა ბოლო$even
- მიმდინარე იტერაცია არის თუ არა ლუწი$odd
- მიმდინარე იტერაცია არის თუ არა კენტი
ეს ცვლადები ამ სახელებით ყოველთვის ხელმისაწვდომია, თუმცა
მათგან ალიასების შექმნაც შეგვიძლია let
სეგმენტით:
<ul>
@for (item of items; track item.id; let idx = $index; let e = $even) {
<li>{{ item.name }} {{idx}}</li>
}
</ul>
@empty
ბლოკი
ჩვენ შეგვიძლია @for
ბლოკს მოვაყოლოთ @empty
ბლოკი, რომლის შიგთავსიც
მხოლოდ იმ შემთხვევაში გამოჩნდება, თუ მასივი ცარიელია:
<ul>
@for (item of items; track item.id) {
<li>{{ item.name }} {{$index}}</li>
} @empty {
<li>აქ არაფერია!</li>
}
</ul>
@switch
ბლოკი
@switch
ბლოკი ჰგავს ჯავასკრიპტის switch
-ს, სადაც შეგვიძლია კონკრეტული
მნიშვნელობის სხვადასხვა შემთხვევების მიხედვით გამოვაჩინოთ ინფორმაცია:
@switch (condition) {
@case (caseA) {
Case A.
}
@case (caseB) {
Case B.
}
@default {
Default case.
}
}
პირობის ექსფრეშენის მნიშვნელობის შედარება ქეისთან ხდება ===
(მკაცრი ტოლობის) ოპერატორით.
@switch
-ში არ ხდება ჯავასკრიპტისთვის ჩვეული fall-through,
ამიტომ break
ან return
-ის მსგავსი ქივორდები არ გვჭირდება.
@default
ბლოკი არასავალდებულოა. თუ ის არ არსებობს და არც ერთი @case
არ გამოდგა ჭეშმარიტი,
მაშინ შედეგად არაფერი გამოჩნდება.