کنترل جریان (Control Flow)

کنترل جریان یعنی تصمیم گیری در قالب. دستورهای @if، @for، و @switch مسیر نمایش را می سازند. این ها جایگزین نسخه های قدیمی مثل *ngIf و *ngFor در کدهای جدید هستند.

اصول کنترل جریان

@if شاخه ها را می سازد. @for لیست ها را می سازد. @switch بین حالت ها انتخاب می کند. بنابراین کد خواناتر و سریع تر می شود.

@if (score > 90) {
  <p>A</p>
} @else if (score > 75) {
  <p>B</p>
} @else {
  <p>C</p>
}

<ul>
  @for (it of items; track it.id) {
    <li>{{ it.label }}</li>
  } @empty {
    <li>No items</li>
  }
</ul>

@switch (status) {
  @case ('pending') {
    <p>Pending</p>
  }
  @case ('done') {
    <p>Done</p>
  }
  @default {
    <p>Unknown</p>
  }
}

مشاهده در ادیتور

شروع سریع با @if و @for

با @if محتوای جایگزین بساز. سپس با @for لیست را بچرخان. همچنین با track هویت پایدار آیتم ها را نگه دار.

@if (show) {
  <p>Visible</p>
} @else {
  <p>Hidden</p>
}

<ul>
  @for (item of items; track item) {
    <li>{{ item }}</li>
  }
</ul>

مشاهده در ادیتور

نمونه عملی با سیگنال ها

«سیگنال (Signal)» مقدار واکنش گراست. با آن وضعیت را تغییر بده و نما خودکار رندر می شود.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Control Flow</h3>
    <button (click)="show.set(!show())">Toggle</button>
    <button (click)="items.set([])">Clear</button>
    <button (click)="reset()">Reset</button>

    @if (show()) {
      <p>Visible</p>
    } @else {
      <p>Hidden</p>
    }

    <ul>
      @for (item of items(); track item) {
        <li>{{ item }}</li>
      } @empty {
        <li>No items</li>
      }
    </ul>
  `
})
export class App {
  show = signal(true);
  items = signal(['One', 'Two', 'Three']);

  reset() {
    this.items.set(['One', 'Two', 'Three']);
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

گام های عملی

1. یک پرچم برای نمایش بساز.
2. با @if متن جایگزین نشان بده.
3. با @for لیست و حالت خالی بساز.
4. برای آیتم ها از track استفاده کن.

نکته ها و سازگاری

• نکته: برای اشیاء، توسط کلید پایدار track کن.
• نکته: منطق را در TypeScript نگه دار، نه در قالب.
• نکته: نسخه های قدیمی هنوز پشتیبانی می شوند؛ برای کد جدید @-ها را ترجیح بده.

جمع بندی سریع

• @if برای شاخه ها عالی است.
• @for با track لیست را پایدار می کند.
• @switch چند حالت را تمیز مدیریت می کند.
• سیگنال ها رندر را خودکار تازه می کنند.

بیشتر بخوان: راه اندازی برنامه، سیگنال ها، و راهنمای کنترل جریان انگولار.