Компоненти в Angular 2 — Сторонні елементи управління

18

Від автора: Angular 2 дозволяє працювати з будь-якими сторонніми елементами управління. Після того, як ви вирішите реалізувати елемент керування, вам необхідно виконати наступні дії.

Крок 1 — Встановіть Angular компоненти з допомогою команди npm. Наприклад, ми встановимо сторонній елемент керування для ng2-пагинации за допомогою наступної команди.

npm install ng2-pagination —save

Компоненти в Angular 2 — Сторонні елементи управління

Після цього ви побачите, що компонент успішно встановлений.

Компоненти в Angular 2 — Сторонні елементи управління

Крок 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 — Збережіть всі зміни в коді і оновіть сторінку браузера, ви отримаєте наступний результат.

Компоненти в Angular 2 — Сторонні елементи управління

Компоненти в Angular 2 — Сторонні елементи управління

На наведеному вище скріншоті, ви можете бачити, що зображення були збережені як 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}}
  • Компоненти в Angular 2 — Сторонні елементи управління

Примітка:

Директива ngFor використовується для повторення всіх елементів властивості appList.

Для кожної властивості елемент списку відображає зображення.

Властивість src кожного тега img потім зв’язується з властивістю url для appList в нашому класі.

Крок 7 — Збережіть всі зміни в коді і оновіть сторінку браузера. На результаті ви можете чітко бачити, що зображення були обрані і відображені.

Компоненти в Angular 2 — Сторонні елементи управління