نام مستعار (Alias)

گاهی یک عبارت را زیاد تکرار می کنیم. با «نام مستعار (Alias)» در *ngIf یک اسم محلی می سازیم و تکرار را حذف می کنیم.

نام مستعار در *ngIf چیست؟

در *ngIf می توانی نتیجه شرط را با as به یک نام محلی بدهی. سپس همان نام را داخل بلوک استفاده کن و دیگر عبارت اصلی را تکرار نکن.

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

• وقتی یک عبارت چندبار تکرار می شود.
• وقتی الگوی else نیز به همان مقدار نیاز دارد.
• برای خوانایی بهتر و کدنویسی کوتاه تر.

نمونه کامل

دکمه را بزن. وضعیت کاربر عوض می شود. نام مستعار u مقدار کاربر را نگه می دارد.

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)=\"toggle()\">Toggle user</button>
    <p *ngIf=\"user as u; else empty\">Hello {{ u.name }}!</p>
    <ng-template #empty>No user</ng-template>
  `
})
export class App {
  user: { name: string } | null = { name: 'Ada' };
  toggle(): void {
    if (this.user) {
      this.user = null;
    } else {
      this.user = { name: 'Ada' };
    }
  }
}

bootstrapApplication(App);

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

گام های عملی

1. شرط را با *ngIf بنویس.
2. پس از شرط، از as برای نام مستعار استفاده کن.
3. داخل بلوک، نام مستعار را مصرف کن.

نکته ها

نکته: نام مستعار فقط در همان قالب معتبر است.

نکته: با نام مستعار، کد کوتاه تر و خواناتر می شود.

پیوندهای مرتبط

برای ادامه درباره Pipeها بخوان. همچنین صفحه عبارات و $event را بررسی کن. در این مقاله، از نام مستعار نیز به عنوان کلیدواژه داخلی استفاده شده است.

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

جمع بندی سریع

• as نام محلی می سازد.
• تکرار عبارت را حذف می کند.
• با else عالی کار می کند.
• خوانایی قالب را بهتر می کند.