Angular 2 - Controlli di terze parti
Angular 2 ti consente di lavorare con qualsiasi controllo di terze parti. Una volta deciso il controllo da implementare, è necessario eseguire i seguenti passaggi:
Step 1 - Installa il componente utilizzando il comando npm.
Ad esempio, installeremo il controllo di terze parti ng2-pagination tramite il seguente comando.
npm install ng2-pagination --save 
    
 
    Una volta terminato, vedrai che il componente è stato installato con successo.
 
    Step 2 - Includere il componente nel file 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 { } 
    Step 3 - Infine, implementa il componente nel tuo file 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 { } 
    Step 4 - Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output.
 
    
 
    Nell'immagine sopra, puoi vedere che le immagini sono state memorizzate come One.jpg e two.jpg nella cartella Immagini.
Step 5 - Cambia il codice del file app.component.ts come segue.
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'
   } ];
} 
    I seguenti punti devono essere annotati sul codice sopra.
Stiamo definendo un array chiamato appList che è del tipo any. In questo modo può memorizzare qualsiasi tipo di elemento.
Stiamo definendo 2 elementi. Ogni elemento ha 3 proprietà, ID, Nome e URL.
L'URL di ogni elemento è il percorso relativo alle 2 immagini.
Step 6 - Apporta le seguenti modifiche al file app / app.component.html che è il tuo file modello.
<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div> 
    I seguenti punti devono essere annotati sul programma di cui sopra:
La direttiva ngFor viene utilizzata per scorrere tutti gli elementi della proprietà appList.
Per ogni proprietà, utilizza l'elemento dell'elenco per visualizzare un'immagine.
La proprietà src del tag img è quindi limitata alla proprietà url di appList nella nostra classe.
Step 7- Salva tutte le modifiche al codice e aggiorna il browser, otterrai il seguente output. Dall'output, puoi vedere chiaramente che le immagini sono state raccolte e mostrate nell'output.
                    