Використання компонентів Angular зі сторонніми бібліотеками

366

Від автора: як розробники, ми прагнемо використовувати існуючі бібліотеки, щоб не знову винаходити велосипед. На жаль, Angular як і раніше відносно молодий, і ми не можемо знайти компоненти Angular для всього, що нам потрібно.

Мета цієї статті — продемонструвати приклади використання, в яких Angular компоненти можуть бути пов’язані з бібліотеками vanilla.

Приклад 1

У цьому прикладі ми будемо використовувати бібліотеку під назвою Sweet Alert. SweetAlert створює гарні спливаючі повідомлення.

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

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

Використання компонентів Angular зі сторонніми бібліотеками

Тепер ми можемо використовувати це і передати компонент Angular в якості content. Щоб це працювало нам потрібно створювати компонент динамічно. Ми створюємо простий компонент, який можна передати у Sweet Alert.

@Component({
template: `
{{text}}
`
})
export class CustomComponent {
@Input() text = ‘Click me’;
log() {
console.log(‘From Custom Component!!’);
}
}

Наступне, що нам потрібно зробити, це створити компонент.

import { Component, ComponentFactoryResolver, Інжектор } 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: `

  • {{point.series.name}}:

`
})
export class AppComponent {
private _component: ComponentRef;
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 зі сторонніми бібліотеками