Использование компонентов Angular со сторонними библиотеками

Использование компонентов Angular со сторонними библиотеками

От автора: как разработчики, мы стремимся использовать существующие библиотеки, чтобы не изобретать снова велосипед. К сожалению, Angular по-прежнему относительно молод, и мы не можем найти компоненты Angular для всего, что нам нужно.

Цель этой статьи — продемонстрировать примеры использования, в которых Angular компоненты могут быть связаны с библиотеками vanilla.

Пример 1

В этом примере мы будем использовать библиотеку под названием Sweet Alert. SweetAlert создает красивые всплывающие сообщения.

Одним из полезных параметров, которые мы можем передать библиотеке, является параметр content, являющийся элементом DOM, который будет отображаться внутри модального окна, например:

let slider = document.createElement("input");
 slider.type = "range";
 
 swal({
  content: slider
 });

Использование компонентов Angular со сторонними библиотеками

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

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

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

Теперь мы можем использовать это и передать компонент Angular в качестве content. Чтобы это работало нам нужно создавать компонент динамически. Мы создаем простой компонент, который можно передать в Sweet Alert.

@Component({
 template: `
 <button (click)="log()">{{text}}</button>
 `
 })
 export class CustomComponent {
 
 @Input() text = 'Click me';
 
 log() {
 console.log('From Custom Component!!');
 }
 
 }

Следующее, что нам нужно сделать, это создать компонент.

import { Component, ComponentFactoryResolver, Injector } from '@angular/core';
 import { CustomComponent } from './custom/custom.component';
 import swal from 'sweetalert';
 
 @Component({
 ...
 })
 export class AppComponent {
 
 constructor( private _resolver: ComponentFactoryResolver, 
 private _injector : Injector ) {
 }
 
 ngOnInit() {
 const factory = this._resolver.resolveComponentFactory(CustomComponent);
 const component = factory.create(this._injector);
 
 swal({
 content: component.location.nativeElement
 }).then(() => {
 component.destroy();
 });
 }
 }

После того, как мы создали компонент, мы получим ссылку на собственный элемент DOM, который передается в параметр Sweet Alert content. Кроме того, конечно, мы можем передать при необходимости Input().

const factory = this._resolver.resolveComponentFactory(CustomComponent);
 const component = factory.create(this._injector);
 component.instance.text = 'Custom text';
 component.changeDetectorRef.detectChanges();

Пример 2

В этом примере мы будем использовать библиотеку под названием highcharts. Часто нам бывает необходимо настроить в разметке всплывающие подсказки для диаграмм. Такие библиотеки, как highcharts, дают нам возможность передать HTML-строку, которая будет отображаться внутри всплывающей подсказки. Давайте создадим компонент Angular и передадим его в библиотеку.

@Component({
 template: `
 <ul>
 <li *ngFor="let point of data">
 <b>{{point.series.name}}</b>:
 <span [ngStyle]="point.y < 40 && { color: 'red' }">{{point.y}}</span>
 </li>
 </ul>
 `
 })
 export class PointsComponent {
 @Input() data;
 }

Мы создали простой компонент, который получает данные в качестве Input() и отображает их списком. Теперь давайте посмотрим, как мы можем это использовать.

@Component({
 template: `
 <div id="container" style="height: 500px"></div>
 `
 })
 export class AppComponent {
 private _component: ComponentRef<PointsComponent>;
 
 constructor(private _resolver: ComponentFactoryResolver, private _injector: Injector) {}
 
 ngOnInit() {
 const factory = this._resolver.resolveComponentFactory(PointsComponent);
 this._component = factory.create(this._injector);
 }
 
 ngAfterViewInit() {
 const that = this;
 Highcharts.chart('container', {
 //....параметры диаграммы
 tooltip: {
 formatter: function() {
 that._component.instance.data = this.points;
 that._component.changeDetectorRef.detectChanges();
 const element = that._component.location.nativeElement;
 return element.innerHTML;
 },
 useHTML: true
 },
 });
 }
 }

Сначала мы создаем компонент один раз внутри хука ngOnInit. Внутри обратного вызова formatter мы имеем доступ к точкам диаграммы, которые передаются нашему компоненту в качестве Input(). Затем мы выполняем обнаружение изменений и возвращаем innerHTML, который будет отображаться внутри элемента подсказки.

Использование компонентов Angular со сторонними библиотеками

Автор: Netanel Basal

Источник: https://netbasal.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