Использовать внешнюю библиотеку JavaScript в приложении Angular 8

Использовать внешнюю библиотеку JavaScript в приложении Angular 8

Пока вы связали файл javascript в html, он будет работать нормально.

РЕДАКТИРОВАТЬ:

Лучший способ добавить дополнительный файл javascript — это поместить его в раздел «scripts» в файле angular.json . Вы также можете добавить

 declare const FunnelGraph: any 

чтобы скомпилировать без ошибок. Это было взято из ответа на вопрос stackoverflow и данного руководства . Не забудьте включить файлы CSS в этот JSON тоже!

РЕДАКТИРОВАТЬ КОНЕЦ

Вы получаете эту ошибку, потому что код пытается найти элемент HTML с классом с именем «воронка», но не может его найти. Поскольку это директива, было бы лучше, если бы она была немного более обобщенной.

Прежде всего, вы должны переместить ваш генерирующий граф код в конструктор, так как это директивная логика. Чтобы лучше обобщить эту директиву, было бы лучше, если бы вы дали уникальный идентификатор этому элементу и соответственно изменили код. Вот как я бы это сделал:

HTML:

 {amp}lt;div id="funnel-graph-1" appFunnelGraph{amp}gt;{amp}lt;/div{amp}gt; 

JS:

 import { Directive, ElementRef } from '@angular/core'; // It should be fine to just import this in the html with a script tag // import * as graph from 'funnel-graph-js/dist/js/funnel-graph.js'; @Directive({ selector: '[appFunnelGraph]' }) export class FunnelGraphDirective { style: any; constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; var graph = new FunnelGraph({ // Generalize the container selector with the element id container: '#'   el.nativeElement.id, gradientDirection: 'horizontal', data: { labels: ['Impressions', 'Add To Cart', 'Buy'], subLabels: ['Direct', 'Social Media', 'Ads'], colors: [ ['#FFB178', '#FF78B1', '#FF3C8E'], ['#A0BBFF', '#EC77FF'], ['#A0F9FF', '#7795FF'] ], values: [ [3500, 2500, 6500], [3300, 1400, 1000], [600, 200, 130] ] }, displayPercent: true, direction: 'horizontal' }); graph.draw(); } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector