کامپوننت دینامیک در انگولار

سلام. امیدوارم حال دلتون خوب باشه. توی این مقاله قصد دارم مفصل و قدم به قدم از دینامیک کامپوننت براتون بگم. اما قبل از همه اینها اصلا کاربرد دینامیک کامپوننت چی هستش؟

-صفحات داینامیک: مؤلفه‌های پویا به شما امکان می‌دهند تا صفحات داینامیک و پویا را ایجاد کنید، جایی که شما می‌توانید مؤلفه‌ها را براساس داده‌هایی که در زمان اجرا دریافت می‌کنید، بسازید و نمایش دهید. این می‌تواند در سناریوهایی مانند تولید فرم‌های پویا، جدول‌های پویا و کارت‌های پویا مفید باشد.

- موارد استفاده چندباره (Reusable components): با استفاده از مؤلفه‌های پویا، می‌توانید مؤلفه‌هایی را با کدهای مشابه ایجاد کنید که تنها در ویژگی‌ها و رفتارها متفاوت هستند. به عنوان مثال، ممکن است یک لیستی از آیتم‌ها داشته باشید که هر آیتم بر اساس نوع آن یک مؤلفه فرزند خاص دارد. با استفاده از مؤلفه‌های پویا، می‌توانید یک مؤلفه لیست را بسازید که مؤلفه فرزند مورد نیاز را براساس نوع آیتم تعریف کنید.

- دسترسی به API و خدمات خارجی: در برخی موارد، شما نیاز دارید تا در زمان اجرا به API یا خدمات خارجی دسترسی داشته باشید و نتیجه را نمایش دهید. با استفاده از مؤلفه‌های پویا، می‌توانید نمونه‌هایی از مؤلفه‌ها را در زمان اجرا بسازید و اطلاعات را از API دریافت کرده و درون مؤلفه‌ها نمایش دهید.

- پنجره‌ها و مودال‌ها: مؤلفه‌های

حالا بیاین مرحله به مرحله بریم جلو:
مرحله اول: مدل و کلاس مربوط به صدا زدن کامپوننت خودتون بسازید.

import { Type } from '@angular/core';
export class CommonDynamicModel {
  constructor(public component?: Type<any>, public data?: any) {}
}

export interface DataComponent {
  data: any;
}

مرحله دوم: ساخت دیرکتیو برای switch کردن بین کامپوننت ها
برای اینکه کامپوننت دینامیک ما کامپوننت های فرزند ببینه و اونها توی template که واسش معرفی میکنیم جای گذاری کنه، لازم هستش یه دیرکتیو ساده بسازیم و اون داخل کامپوننت دینامیک هم در ts هم در html فراخوانی کنیم.

import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
  // اسم سلکتور باید با اسمی که توی کامپوننت دینامیک میدیم یکی باشه
  selector: '[componentHost]',
})
export class DynamicCommonDirective {
  constructor(public readonly viewContainerRef: ViewContainerRef) {}
}

مرحله سوم: مرکز فرماندهی کامپوننت دینامیک خودتون بسازید.
حالا نوب به ساخت کامپوننت دیرکتیو رسیده که در اینجا ما به کمک دیرکتیو مرحله دوم و همین طور متدی به نام loadComponent این کار انجام میدم:

import { Component,Input,ViewChild,OnChanges,SimpleChanges} from '@angular/core';
import { CommonDynamicModel, DataComponent } from '../common';
import { DynamicCommonDirective } from './dynamic-common.directive';
@Component({
  selector: 'app-dynamic-common',
  templateUrl: './dynamic-common.component.html',
  styleUrls: ['./dynamic-common.component.css'],
})
export class DynamicCommonComponent implements OnChanges {
  @Input() com: CommonDynamicModel = new CommonDynamicModel();
  //دقیقا همان نام سلکتور دیرکتیو باید باشد.
  @ViewChild(DynamicCommonDirective, { static: true }) componentHost!: DynamicCommonDirective;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['com'] && changes['com'].currentValue) {
      this.com.component && this.loadComponent();
    }
  }

  loadComponent() {
    const viewContainerRef = this.componentHost?.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent<DataComponent>(      this.com.component!
    );
    componentRef.instance.data = this.com.data;
  }
}

توی کدهای html هم باید بنویسیم:

<p>dynamic-common works!</p>
<div class=&quotad-banner-example&quot>
       <ng-template componentHost />
</div>

مرحله چهارم: تیکه های پازل کنار هم جمع کن
حالا نوبت به این می رسه که کامپوننت دینامیک با کامپوننت فرزندان یه جا جمع کنیم. برای این کار من توی app.component.ts می نویسم:

import { Component } from '@angular/core';
import { CommonDynamicModel } from './common';
import { ChidOneComponent } from './chid-one/chid-one.component';
import { ChidTwoComponent } from './chid-two/chid-two.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  dataSource: CommonDynamicModel = new CommonDynamicModel();
  loadChildrenComponent(componentName: string, data: string) {
    if (!componentName) return;
    let component: any;
    switch (componentName) {
      case 'child-one':
        component = ChidOneComponent;
        break;
      case 'child-two':
        component = ChidTwoComponent;
        break;
      default:
        break;
    }
    this.dataSource = { component, data };
  }
}

در کد Html هم می نویسیم:

<app-dynamic-common [com]=&quotdataSource&quot></app-dynamic-common>
<button (click)=&quotloadChildrenComponent('child-one', 'this is one data')&quot>
  Child Component 1
</button>
<button (click)=&quotloadChildrenComponent('child-two', 'lorem epson')&quot>
  Child Component 2
</button>

مرحله پنجم: حسن ختام ماجرا!
توی مرحله آخر می خوام یکی از کامپوننت های فرزند برای اینکه ببنید input بهش چطور ارسال کنیم هم قرار میدم.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-chid-one',
  templateUrl: './chid-one.component.html',
  styleUrls: ['./chid-one.component.css'],
})
export class ChidOneComponent {
  @Input('data') data: any;
}

و این بود ساخت کامپوننت دینامیک در انگولار.

به انتهای این مقاله رسیدیم، امیدوارم از این مقاله نهایت استفاده ببرید.
ممنون از توجهتون
:))