در مقاله قبلی در مورد Angular 2 به این موضوع پرداختیم که لوله ها چیست و چگونه می توان لوله های سفارشی را در Angular 2 ایجاد کرد . حال در این مقاله با کامپوننت های Angular 2 آشنا می شویم و همچنین نحوه ایجاد یک کامپوننت تو در تو و نحوه ارتباط کامپوننت های والد و فرزند با یکدیگر را خواهیم دید.
Angular 2 Components
همه ما می دانیم که Angular 2 یک فریم ورک مبتنی بر کامپوننت است زیرا همه چیز در Angular 2 یک جزء است. اساساً کامپوننت ها بلوک های اصلی برنامه Angular 2 هستند. همچنین به ما اجازه می دهد تا قالب های UI قابل استفاده مجدد ایجاد کنیم.
یک کامپوننت در Angular 2 یک کلاس با یک الگو و یک دکوراتور است. اساساً بخش های زیر از کامپوننت Angular 2 وجود دارد:
- کلاس
بسیار شبیه به کلاس C# یا کلاس جاوا و غیره است. شامل سازنده، متغیرها و کد متدهایی است که برای رابط کاربری/الگو لازم است.
- Decorator
برای ذخیره ابرداده های مربوط به کلاس از دکوراتور استفاده می شود. اساساً دکوراتور ارائه شده توسط Angular یک کلاس را هنگامی که با دکوراتور کامپوننت تزئین شده است به یک جزء Angular تبدیل می کند.
Angular 2 اساساً 4 نوع دکوراتور را در اختیار ما قرار می دهد.
- دکوراتورهای کلاس
برای نمونه @NgModule، @Component و @Directive
- دکوراتورهای املاک
برای مثال. @ورودی خروجی
- روش تزئینات
برای مثال. @HostListener
- پارامترهای دکوراتور
برای مثال. @Inject
در اینجا قصد ندارم انواع دکوراتورها را به تفصیل تعریف کنم. در مقالات بعدی به تفصیل در مورد آنها صحبت خواهیم کرد.
هر دکوراتور دارای یک پیکربندی اولیه با استفاده از چندین ویژگی است. ما در اینجا به برخی از ویژگی های پیکربندی احتمالی نگاه می کنیم که می توانید هنگام ایجاد یک جزء از آنها استفاده کنید.
- انتخابگر - برای شناسایی این مؤلفه در قالب ها استفاده می شود.
- الگو – این برای تعریف قالب HTML درون خطی برای نما استفاده می شود.
- TemplateUrl - برای تعریف URL به یک فایل خارجی حاوی یک الگو برای نمایش استفاده می شود.
- Styles - این برای تعریف CSS درون خطی برای اعمال به الگوی این مؤلفه استفاده می شود.
- StyleUrls - برای تعریف URLها به شیوه نامه های خارجی برای اعمال به الگوهای این مؤلفه استفاده می شود.
- viewProviders - برای تعریف لیستی از ارائه دهندگان موجود برای این مؤلفه و فرزندان مشاهده آن استفاده می شود
برای همه تنظیمات، اینجا را کلیک کنید .
بیایید کامپوننت و قطعات آن را با کمک اسکرین شات زیر و کد کامپوننت درک کنیم.
این نشان می دهد که دکوراتورها واقعاً در کجا به یک کلاس اعمال می شوند و چگونه آنها در واقع مسئول ساختن یک کلاس به یک جزء Angular هستند.
App.component.ts
- import { Component } from '@angular/core';
- @Component({
- selector: 'my-app',
- template: `<list-student></list-student>`,
- })
- export class AppComponent {
- name = 'Angular';
- }
اجزای تو در تو
حال، نحوه ایجاد یک مؤلفه تودرتو (کامپوننت والد و مؤلفه فرزند) در برنامه های Angular 2 و نحوه ارتباط مؤلفه های والد و فرزند با یکدیگر را بررسی خواهیم کرد.
من از همان پروژه دانشجویی استفاده می کنم که تاکنون در مقالات قبلی خود از آن استفاده کرده ام. می توانید آن را از اینجا دانلود کنید . ما مؤلفه نوار جستجو و قابلیت جستجو را برای مؤلفه فهرست دانش آموز موجود ایجاد می کنیم.