Angular 2 - Üçüncü Taraf Denetimleri

Angular 2, herhangi bir üçüncü taraf denetimleriyle çalışmanıza izin verir. Uygulanacak kontrole karar verdiğinizde, aşağıdaki adımları uygulamanız gerekir -

Step 1 - npm komutunu kullanarak bileşeni kurun.

Örneğin, ng2 sayfalama üçüncü taraf kontrolünü aşağıdaki komutla kuracağız.

npm install ng2-pagination --save

Tamamlandığında, bileşenin başarıyla kurulduğunu göreceksiniz.

Step 2 - Bileşeni app.module.ts dosyasına ekleyin.

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 { }

Step 3 - Son olarak, bileşeni app.component.ts dosyanıza uygulayın.

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 { }

Step 4 - Tüm kod değişikliklerini kaydedin ve tarayıcıyı yenileyin, aşağıdaki çıktıyı alacaksınız.

Yukarıdaki resimde, görüntülerin Görüntüler klasöründe One.jpg ve iki.jpg olarak saklandığını görebilirsiniz.

Step 5 - app.component.ts dosyasının kodunu aşağıdaki şekilde değiştirin.

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'
   } ];
}

Yukarıdaki kodla ilgili aşağıdaki noktalara dikkat edilmelidir.

Any türünde olan appList adında bir dizi tanımlıyoruz. Bu, her tür öğeyi depolayabilmesi içindir.
2 element tanımlıyoruz. Her elemanın 3 özelliği vardır: ID, Name ve url.
Her öğenin URL'si, 2 görüntünün göreli yoludur.

Step 6 - Şablon dosyanız olan app / app.component.html dosyasında aşağıdaki değişiklikleri yapın.

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

Yukarıdaki programla ilgili olarak aşağıdaki noktalara dikkat edilmelidir -

NgFor yönergesi, appList özelliğinin tüm öğelerini yinelemek için kullanılır.
Her özellik için, bir görüntüyü görüntülemek için liste öğesini kullanıyor.
İmg etiketinin src özelliği daha sonra sınıfımızdaki appList'in url özelliğine bağlıdır.

Step 7- Tüm kod değişikliklerini kaydedin ve tarayıcıyı yenileyin, aşağıdaki çıktıyı alacaksınız. Çıktıdan, görüntülerin alındığını ve çıktıda gösterildiğini açıkça görebilirsiniz.