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 *-すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

コード変更

APPコード

上の図では、画像がOne.jpgおよびtwo.jpgとしてImagesフォルダーに保存されていることがわかります。

ステップ5 *-app.component.tsファイルのコードを次のように変更します。

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

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

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

上記のコードについて、次の点に注意する必要があります。

any型のappListという配列を定義しています。これは、あらゆるタイプの要素を保存できるようにするためです。
2つの要素を定義しています。各要素には、ID、名前、およびURLの3つのプロパティがあります。
各要素のURLは、2つの画像への相対パスです。

ステップ6 *-テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<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 *-すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。出力から、画像が取得されて出力に表示されていることがはっきりとわかります。

ピックアップ済み

Angular2-third-party-controls

Angular 2-サードパーティコントロール