ساخت Structural directives به همراه مثال در انگولار

در این مقاله قصد اموزش ساخت یک directive مثل *ngIf یا ngFor به نام Structural directives دارم. directive ها مسئول ساختار بندی بر روی لایه HTML هستش.اونها ساختار DOM را به طور معمول با اضافه کردن ، حذف یا دستکاری عناصر ، شکل می دن یا بهش تغییر شکل می دن.Structural directives با حرف * شروع میشن. برای اینکه این موضوع برای شما بهتر قابل درک باشه با یه مثال کار خودمون ادامه میدیم.

فرض کنید یه آرایه داریم که این آرایه دوتا مقدار عددی توی خودش جا داده.این دو تا عدد تاریخ هستن که باید به date تبدیل بشن.ما می خوایم بررسی کنیم که این دوتا عدد بعد از اینکه تبدیل به تاریخ شدن آیا تاریخ ها با هم یکسان هستن؟ اگه یکسان بودن اون تگ نشون بده در غیر این صورت تگ پنهان کنه.

تا اینجا سناریو برای خودمون چیدیم حال برای پیاده سازی می خوایم از شرط توی تگ HTML استفاده کنیم. یه dircetive به اسم allowshow می سازم با این دستورات:

import { Directive, Input, ElementRef, ViewContainerRef, TemplateRef } from '@angular/core';

@Directive({
   selector: '[allowshow]'
})

export class AllowShowDirective {
   constructor(
      private element: ElementRef,
      private templateRef: TemplateRef<any>,
      private viewContainer: ViewContainerRef,
) { }

   @Input()
   set allowshow(data: Array<number>) {
      if (data && data.length == 2) {
         var date_one = new Date(1000 * data[0]).toDateString();
         var date_two = new Date(1000 * data[1]).toDateString();
         if (date_one != date_two) {
            this.viewContainer.clear();
         } else {
            this.viewContainer.createEmbeddedView(this.templateRef);
         }
      }
   }
}

بعد از ساخت این directive اون به app.module.ts در declarations تعریف کنید.

حالا از این به بعد هر جا خواستید از این directive استفاده کنید باید بنویسید:

<span *allowshow=&quot[item.date,pr.current_date]&quot>
 .......
</span>

به انتهای این مقاله رسیدیم و امیدوارم از این مقاله استفاده کامل ببرید.

ممنون از توجهتون :)