در حال بارگذاری...

دستورات ساختاری

دستورات ساختاری در انگولار به نوع خاصی از directives گفته می‌شود که ساختار DOM را به صورت دینامیک تغییر می‌دهند. این دستورات می‌توانند یک عنصر را به DOM اضافه کنند، حذف کنند یا تکرار کنند، بسته به وضعیت برنامه یا داده‌های ورودی. نمونه‌های رایج شامل ngIf، ngFor و ngSwitch هستند. ngIf برای نمایش یا مخفی کردن عناصر براساس شرط منطقی، ngFor برای تکرار مجموعه‌ای از داده‌ها و تولید عناصر DOM و ngSwitch برای انتخاب بین چند حالت استفاده می‌شود.
استفاده صحیح از دستورات ساختاری برای ساخت رابط کاربری پویا و مقیاس‌پذیر در برنامه‌های تک‌صفحه‌ای (SPA) حیاتی است. این دستورات با مفاهیم اصلی انگولار مانند کامپوننت‌ها، مدیریت وضعیت، جریان داده و چرخه عمر کامپوننت‌ها ادغام می‌شوند. در این آموزش، یاد خواهید گرفت که چگونه با دستورات ساختاری کامپوننت‌های قابل استفاده مجدد ایجاد کنید، داده‌ها را به صورت دینامیک رندر کنید و عملکرد برنامه را بهینه کنید.

مثال پایه

typescript
TYPESCRIPT Code 
import { Component } from '@angular/core';

@Component({
selector: 'app-structural-demo',
template: ` <h2>لیست پروژه‌ها</h2> <ul>
<li *ngFor="let project of projects">{{ project }}</li> </ul>

<button (click)="toggleMessage()">نمایش/مخفی کردن پیام</button>
<p *ngIf="showMessage">این یک پیام شرطی است.</p>

`
})
export class StructuralDemoComponent {
projects: string[] = ['Project A', 'Project B', 'Project C'];
showMessage: boolean = false;

toggleMessage() {
this.showMessage = !this.showMessage;
}
}

در این مثال از ngFor برای تکرار آرایه پروژه‌ها و تولید یک عنصر لیست برای هر آیتم استفاده شده است. همچنین ngIf برای نمایش یا مخفی کردن یک پاراگراف براساس متغیر بولوئن showMessage استفاده شده است. تابع toggleMessage() با کلیک روی دکمه مقدار showMessage را تغییر می‌دهد و Angular به صورت خودکار DOM را به‌روزرسانی می‌کند. این مثال مفاهیم مهمی مانند بایندینگ رویدادها، مدیریت وضعیت و چرخه عمر کامپوننت را نشان می‌دهد که برای رابط‌های کاربری بزرگ و پویا ضروری هستند.

مثال کاربردی

typescript
TYPESCRIPT Code 
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-user-card',
template: `     <div *ngIf="user" class="card">       <h3>{{ user.name }}</h3>       <p>Email: {{ user.email }}</p>       <p *ngIf="user.isActive; else inactive">Status: Active</p>       <ng-template #inactive>Status: Inactive</ng-template>     </div>
`,
styles: [`     .card { border: 1px solid #ccc; padding: 16px; margin: 8px 0; border-radius: 8px; }
`]
})
export class UserCardComponent {
@Input() user: { name: string; email: string; isActive: boolean } | null = null;
}

@Component({
selector: 'app-user-list',
template: `     <app-user-card *ngFor="let user of users" [user]="user"></app-user-card>
`
})
export class UserListComponent {
users = [
{ name: 'Alice', email: '[[email protected]](mailto:[email protected])', isActive: true },
{ name: 'Bob', email: '[[email protected]](mailto:[email protected])', isActive: false },
{ name: 'Charlie', email: '[[email protected]](mailto:[email protected])', isActive: true }
];
}

در این مثال پیشرفته، UserCardComponent و UserListComponent نشان داده شده‌اند. UserCardComponent از ngIf و ng-template برای نمایش وضعیت کاربر به صورت دینامیک استفاده می‌کند. UserListComponent از ngFor برای رندر کردن لیست کاربران و ارسال داده‌ها به کامپوننت فرزند از طریق @Input استفاده می‌کند. این ساختار باعث می‌شود که کامپوننت‌ها قابل استفاده مجدد و کارآمد باشند. استفاده صحیح از دستورات ساختاری و hooks چرخه عمر باعث می‌شود آپدیت‌های UI بهینه و بدون باگ انجام شود.

بهترین شیوه‌ها و اشتباهات رایج در دستورات ساختاری:

  • استفاده از ngIf، ngFor و ng-template و اجتناب از دستکاری مستقیم DOM.
  • جداسازی منطق و نمایش؛ از تغییر مستقیم داده‌ها در template خودداری کنید.
  • برای لیست‌های بزرگ از trackBy در *ngFor استفاده کنید.

  • جریان داده بین کامپوننت‌ها را با @Input و Events مدیریت کنید.
    اشتباهات رایج:

  • تغییر مستقیم آرایه‌ها یا آبجکت‌ها در template.

  • تو در تو کردن بیش از حد دستورات ساختاری.

  • عدم بررسی null یا undefined در *ngIf.
    بهینه‌سازی عملکرد و امنیت:

  • استفاده از trackBy برای کاهش ریبیلد DOM.

  • جلوگیری از تولید غیرضروری DOM با ng-template.
  • اعتبارسنجی ورودی کاربران.

📊 جدول مرجع

انگولار Element/Concept Description Usage Example
*ngIf نمایش شرطی عناصر DOM <p *ngIf="isVisible">پیام نمایش داده شود</p>
*ngFor تکرار آرایه و تولید عناصر DOM <li *ngFor="let item of items">{{ item }}</li>
ng-template تعریف template قابل استفاده مجدد <ng-template #alt>محتوای جایگزین</ng-template>
@Input ارسال داده از کامپوننت والد به فرزند <child [data]="parentData"></child>
trackBy بهینه‌سازی عملکرد *ngFor *ngFor="let item of items; trackBy: trackById"

یادگیری دستورات ساختاری به شما امکان ایجاد UI دینامیک، مقیاس‌پذیر و بهینه را می‌دهد. گام بعدی شامل مدیریت پیشرفته وضعیت (NgRx)، استراتژی تغییر تشخیص و مدیریت داده‌های غیرهمزمان است. استفاده صحیح از این دستورات باعث می‌شود کامپوننت‌ها قابل استفاده مجدد شوند و نگهداری پروژه آسان‌تر شود. منابع مستندات و مثال‌های عملی، یادگیری شما را تقویت می‌کنند.

کلیدواژه‌های مرتبط

کاربران همچنین با این عبارات این محتوا را جستجو می‌کنند:

انگولار دستورات ساختاری انگولار *ngIf مثال انگولار *ngFor لیست انگولار ng-template مدیریت وضعیت انگولار جریان داده در کامپوننت UI دینامیک انگولار کامپوننت‌های قابل استفاده مجدد انگولار بهینه‌سازی عملکرد *ngFor چرخه عمر دستورات انگولار دستورات پیشرفته انگولار template شرطی انگولار بهینه‌سازی *ngFor انگولار Best Practices دستورات انگولار

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
4
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Angular آموزش