دستورهای ساختاری (Structural Directives)

اینجا میان بُر میکروسینتکس را می شناسی. با ستاره *، انگولار کد را به <ng-template> بسط می دهد. بنابراین کد کوتاه می شود و خوانایی بهتر می شود.

میکروسینتکس چیست؟

میکروسینتکس یعنی نوشتن دستور ساختاری با *. سپس انگولار آن را به یک <ng-template> کامل تبدیل می کند. همچنین متغیرهای زمینه مثل index as i می دهد.

چه زمانی استفاده کنیم؟

وقتی می خواهی براساس وضعیت، DOM را اضافه یا حذف کنی. یا وقتی می خواهی روی لیست ها با *ngFor سریع حلقه بزنی. اگر نیاز شد، نسخه صریح <ng-template> را بنویس.

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

<div *ngIf=\"ok; else other\">OK</div>
<ng-template #other>Not OK</ng-template>
<li *ngFor=\"let item of items; index as i\">{{ i }} {{ item }}</li>

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

نکته: در انگولار 17+، نحو کنترل جریان جدید مثل @if و @for پیشنهاد می شود. اما این نحو همچنان پشتیبانی می شود.

نمونه کامل با کامپوننت

با دکمه وضعیت را عوض کن. سپس *ngIf و *ngFor نتیجه را نشان می دهند.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)=\"ok = !ok\">Toggle</button>
    <div *ngIf=\"ok; else other\">OK</div>
    <ng-template #other>Not OK</ng-template>
    <ul>
      <li *ngFor=\"let item of items; index as i\">{{ i }} - {{ item }}</li>
    </ul>
  `
})
export class App {
  ok: boolean = true;
  items: string[] = ['A', 'B', 'C'];
}

bootstrapApplication(App);

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

گام های عملی

1. برای شرط ها از *ngIf استفاده کن.
2. برای لیست ها از *ngFor کمک بگیر.
3. با index as i شماره خانه را بگیر.
4. در نیازهای خاص، <ng-template> را صریح بنویس.

پیوندها

برای ادامه موضوع به ngTemplateOutlet برو. همچنین درباره ناوبری امن از نال بخوان. اگر می خواهی بیشتر درباره دستورهای ساختاری ببینی، همین صفحه مرجع است.

منبع W3Schools · اجرای زنده نمونه

جمع بندی سریع

• * به <ng-template> بسط می شود.
• *ngIf برای نمایش شرطی است.
• *ngFor برای پیمایش لیست هاست.
• متغیرهای زمینه مانند index as i مفیدند.