انواع Selector در کامپوننت‌های انگولار

یک برنامه انگولار از کامپوننت‌‌های مختلفی تشکیل شده است. هر کامپوننت یک کلاس هست که export می‌شود. برای این که بتوان در انگولار از این کلاس استفاده کرد باید آن را به شکل یک کامپوننت تعریف کرد. برای این کار از دکوراتور component@ استفاده می‌کنیم که این دکوراتور خود دارای چندین پراپرتی هست. پراپرتی selector و template در یک کامپوننت ضروری هستند ولی پراپرتی styles آپشنال است. علاوه بر این‌ها لازم است که ماژول component از angular/core@ ایمپورت شود.

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

1. تعریف اسم کامپوننت به صورت یه رشته که معمولا با -app شروع می‌شود.

@Component({

    selector: 'app-element',

    template:  './element.component.html',

    styleUrls: ['./element.component.css']

})

برای استفاده از این کامپوننت از تگ باز و بسته html استفاده می‌کنیم که داخل این تگ اسم کامپوننت قرار می‌گیرد.

<app-element></app-element>

۲. استفاده از attribute selector

@Component({

    selector: '[app-element]',

    template:  './element.component.html',

    styleUrls: ['./element.component.css']

})

برای استفاده از این کامپوننت، کامپوننت را به صورت یک attribute داخل یک المنت استفاده می‌کنیم.

<div app-element></div>

۳. تعریف به صورت یک کلاس CSS اس که با dot شروع می‌شود:

@Component({

    selector: '.app-element',

    template:  './element.component.html',

    styleUrls: ['./element.component.css']

}

نحوه‌ی استفاده از کامپوننت

<div class=&quotapp-element&quot></div>