Angular 2 - 第三方控制元件

Angular 2 允許您使用任何第三方控制元件。一旦您決定要實現的控制元件，您需要執行以下步驟：

步驟 1 - 使用 npm 命令安裝元件。

例如，我們將使用以下命令安裝 ng2-pagination 第三方控制元件。

npm install ng2-pagination --save

完成後，您將看到該元件已成功安裝。

步驟 2 - 在 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 { }

步驟 3 - 最後，在您的 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 { }

步驟 4 - 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。

在上圖中，您可以看到影像已儲存為 Images 資料夾中的 One.jpg 和 two.jpg。

步驟 5 - 將 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 的陣列，其型別為 any。這是為了使其能夠儲存任何型別的元素。

• 我們定義了 2 個元素。每個元素具有 3 個屬性：ID、名稱和 url。

• 每個元素的 URL 是指向 2 個影像的相對路徑。

步驟 6 - 對您的模板檔案 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 屬性的所有元素。

• 對於每個屬性，它使用列表元素來顯示影像。

• img 標籤的 src 屬性然後繫結到我們類中 appList 的 url 屬性。

步驟 7 - 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。從輸出中，您可以清楚地看到影像已被提取並顯示在輸出中。