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

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

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

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

Пример 1

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

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

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

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

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

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

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

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

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

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

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

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

Пример 2

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

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

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

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

Автор: Netanel Basal

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

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

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

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

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

Angular 4 с Нуля до Профи

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree