آموزش کنترل های شخص ثالث در انگولار ۲

آموزش کنترل های شخص ثالث در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کنترل های شخص ثالث در انگولار ۲ خواهیم پرداخت.

انگولار ۲ به شما امکان می دهد با هر کنترل شخص ثالث کار کنید. پس از تصمیم گیری در مورد کنترل برای پیاده سازی، باید مراحل زیر را انجام دهید –

مرحله ۱ – کامپوننت را با استفاده از دستور npm نصب کنید.

به عنوان مثال، ما کنترل شخص ثالث ng2-pagination را از طریق دستور زیر نصب می کنیم.

npm install ng2-pagination --save

پس از اتمام کار، خواهید دید که کامپوننت با موفقیت نصب شده است.

مرحله ۲ – جزء را در فایل app.module.ts قرار دهید.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';

@NgModule ({
   imports:      [ BrowserModule,Ng2PaginationModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

مرحله ۳ – در نهایت کامپوننت را در فایل app.component.ts خود پیاده سازی کنید.

import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';

@Component ({
   selector: 'my-app',
   template: '
      <ul>
         <li *ngFor = "let item of collection | paginate: {
            itemsPerPage: 5, currentPage: p }"> ... </li>
      </ul>
      <pagination-controls (pageChange) = "p = $event"></pagination-controls>
   '
})
export class AppComponent { }

مرحله ۴ – تمام تغییرات کد را ذخیره کرده و مرورگر را رفرش کنید، خروجی زیر را دریافت خواهید کرد.

در تصویر بالا می بینید که تصاویر به صورت One.jpg و two.jpg در پوشه Images ذخیره شده اند.

مرحله ۵ – کد فایل app.component.ts را به شکل زیر تغییر دهید.

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   
   appList: any[] = [{
      "ID": "1",
      "Name": "One",
      "url": 'app/Images/One.jpg'
   },
   {
      "ID": "2",
      "Name": "Two",
      "url": 'app/Images/two.jpg'
   } ];
}

نکات زیر باید در مورد کد بالا ذکر شود.

• ما در حال تعریف آرایه ای به نام appList هستیم که از هر نوع است. این به این دلیل است که می تواند هر نوع عنصری را ذخیره کند.
• ما ۲ عنصر را تعریف می کنیم. هر عنصر دارای ۳ ویژگی ، شناسه ، نام و آدرس اینترنتی است.
• آدرس URL برای هر عنصر مسیر نسبی ۲ تصویر است.

مرحله ۶ – تغییرات زیر را در فایل app/app.component.html که فایل قالب شما است اعمال کنید.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div>

نکات زیر باید در مورد برنامه فوق ذکر شود –

• دستور ngFor برای تکرار در تمام عناصر ویژگی appList استفاده می شود.
• برای هر ویژگی، از عنصر لیست برای نمایش تصویر استفاده می کند.
• سپس ویژگی src تگ img به ویژگی url appList در کلاس ما محدود می شود.

مرحله ۷ – تمام تغییرات کد را ذخیره کرده و مرورگر را رفرش کنید، خروجی زیر را دریافت خواهید کرد.

منبع.

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲
15. آموزش ناوبری در انگولار ۲
16. آموزش فرم ها در انگولار ۲
17. آموزش CLI در انگولار ۲
18. آموزش تزریق وابستگی در انگولار ۲
19. آموزش پیکربندی پیشرفته در انگولار ۲