Від автора: Angular 2 дозволяє працювати з будь-якими сторонніми елементами управління. Після того, як ви вирішите реалізувати елемент керування, вам необхідно виконати наступні дії.
Крок 1 — Встановіть Angular компоненти з допомогою команди npm. Наприклад, ми встановимо сторонній елемент керування для ng2-пагинации за допомогою наступної команди.
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:’
- …
‘
})
export class AppComponent { }
Крок 4 — Збережіть всі зміни в коді і оновіть сторінку браузера, ви отримаєте наступний результат.
На наведеному вище скріншоті, ви можете бачити, що зображення були збережені як One.jpg і two.jpg в папці Images.
Крок 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, Name, url.
URL для кожного елементу url є відносним шляхом до двох зображень.
Крок 6 – Змініть наступним чином файл app/app.component.html, який є файлом шаблону.
- {{lst.ID}}
- {{lst.Name}}
Примітка:
Директива ngFor використовується для повторення всіх елементів властивості appList.
Для кожної властивості елемент списку відображає зображення.
Властивість src кожного тега img потім зв’язується з властивістю url для appList в нашому класі.
Крок 7 — Збережіть всі зміни в коді і оновіть сторінку браузера. На результаті ви можете чітко бачити, що зображення були обрані і відображені.
