От автора: как разработчики, мы стремимся использовать существующие библиотеки, чтобы не изобретать снова велосипед. К сожалению, Angular по-прежнему относительно молод, и мы не можем найти компоненты Angular для всего, что нам нужно.
Цель этой статьи — продемонстрировать примеры использования, в которых Angular компоненты могут быть связаны с библиотеками vanilla.
Пример 1
В этом примере мы будем использовать библиотеку под названием Sweet Alert. SweetAlert создает красивые всплывающие сообщения.
Одним из полезных параметров, которые мы можем передать библиотеке, является параметр content, являющийся элементом DOM, который будет отображаться внутри модального окна, например:
|
1 2 3 4 5 6 |
let slider = document.createElement("input"); slider.type = "range"; swal({ content: slider }); |
Теперь мы можем использовать это и передать компонент Angular в качестве content. Чтобы это работало нам нужно создавать компонент динамически. Мы создаем простой компонент, который можно передать в Sweet Alert.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@Component({ template: ` <button (click)="log()">{{text}}</button> ` }) export class CustomComponent { @Input() text = 'Click me'; log() { console.log('From Custom Component!!'); } } |
Следующее, что нам нужно сделать, это создать компонент.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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().
|
1 2 3 4 |
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 и передадим его в библиотеку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@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() и отображает их списком. Теперь давайте посмотрим, как мы можем это использовать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
@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, который будет отображаться внутри элемента подсказки.
Автор: Netanel Basal
Источник: //netbasal.com/
Редакция: Команда webformyself.
