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 არ გამოდგა ჭეშმარიტი, მაშინ შედეგად არაფერი გამოჩნდება.