От автора: Angular 2 позволяет работать с любыми сторонними элементами управления. После того, как вы решите реализовать элемент управления, вам необходимо выполнить следующие действия.
Шаг 1 — Установите в Angular компоненты с помощью команды npm. Например, мы установим сторонний элемент управления для ng2-пагинации с помощью следующей команды.
|
1 |
npm install ng2-pagination --save |
После этого вы увидите, что компонент успешно установлен.
Шаг 2 — Включите компонент в файле app.module.ts.
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 — Сохраните все изменения в коде и обновите страницу браузера, вы получите следующий результат.
На приведенном выше скриншоте, вы можете видеть, что изображения были сохранены как One.jpg и two.jpg в папке Images.
Шаг 5 — Измените код файла app.component.ts следующим образом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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, Name и url.
URL для каждого элемента url является относительным путем к двум изображениям.
Шаг 6 – Измените следующим образом файл app/app.component.html, который является файлом шаблона.
|
1 2 3 4 5 6 7 |
<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 в нашем классе.
Шаг 7 — Сохраните все изменения в коде и обновите страницу браузера. На результате вы можете четко видеть, что изображения были выбраны и отображены.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
