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

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

От автора: Angular 2 позволяет работать с любыми сторонними элементами управления. После того, как вы решите реализовать элемент управления, вам необходимо выполнить следующие действия.

Шаг 1 — Установите в Angular компоненты с помощью команды npm. Например, мы установим сторонний элемент управления для ng2-пагинации с помощью следующей команды.

npm install ng2-pagination --save

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

После этого вы увидите, что компонент успешно установлен.

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаг 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 — Сохраните все изменения в коде и обновите страницу браузера, вы получите следующий результат.

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

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

На приведенном выше скриншоте, вы можете видеть, что изображения были сохранены как One.jpg и two.jpg в папке Images.

Шаг 5 — Измените код файла app.component.ts следующим образом.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
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, который является файлом шаблона.

<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 — Сохраните все изменения в коде и обновите страницу браузера. На результате вы можете четко видеть, что изображения были выбраны и отображены.

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree