Від автора: як розробники, ми прагнемо використовувати існуючі бібліотеки, щоб не знову винаходити велосипед. На жаль, Angular як і раніше відносно молодий, і ми не можемо знайти компоненти Angular для всього, що нам потрібно.
Мета цієї статті — продемонструвати приклади використання, в яких Angular компоненти можуть бути пов’язані з бібліотеками vanilla.
Приклад 1
У цьому прикладі ми будемо використовувати бібліотеку під назвою Sweet Alert. SweetAlert створює гарні спливаючі повідомлення.
Одним з корисних параметрів, які ми можемо передати бібліотеці, є параметр content, що є елементом DOM, який буде відображатися всередині модального вікна, наприклад:
let slider = document.createElement(“input”);
slider.type = “range”;
swal({
content: slider
});
Тепер ми можемо використовувати це і передати компонент 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}}: