在Angular 8应用程序中使用外部JavaScript库

我对Angular是个新手，我想开发一个漏斗图。我喜欢图书馆。我试了很多，但没有成功

这是我的

漏斗图指令。ts

import { Directive, ElementRef } from '@angular/core';

// import * as graph from '../../../assets/js/funnel-graph.js';
import * as graph from 'funnel-graph-js/dist/js/funnel-graph.js';
var graph = new FunnelGraph({
  container: '.funnel',
  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();
@Directive({
  selector: '[appFunnelGraph]'
})
export class FunnelGraphDirective {
  style: any;
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

我已经在我的

angular.json

"styles": [
  "src/styles.scss",
  "./node_modules/funnel-graph-js/dist/css/main.css",
  "./node_modules/funnel-graph-js/dist/css/theme.css"
],
"scripts": [
  "./node_modules/funnel-graph-js/dist/js/funnel-graph.js"
]

这是我得到的错误

---

只要在html中链接javascript文件，它就可以正常工作

编辑：

包含附加javascript文件的更好方法是将其放入angular.json文件的“scripts”部分。您还可以添加

declare const FunnelGraph: any

为了编译没有错误。这是从和中提取的。记住也要在json中包含css文件

编辑结束

之所以会出现此错误，是因为代码试图查找具有名为“漏斗”的类的HTML元素，但找不到它。因为这是一个指令，所以如果它更通用一点就更好了

首先，您应该将图形生成代码移动到构造函数中，因为这是指令逻辑所在的位置。为了更好地概括此指令，最好为该元素提供一个唯一的id，并相应地更改代码。我会这样做：

HTML:

---

最后，我创建了

服务

，而不是使用

指令

方法

• 首先，我在中生成了一个名为

  dynamic script loader service

  的服务 我的

  仪表板
  模块

dynamic-service-loader.service.service.ts

dashboard.component.ts

在我的

仪表板.module.ts中添加了
提供程序

import { Directive, ElementRef } from '@angular/core';

// import * as graph from '../../../assets/js/funnel-graph.js';
import * as graph from 'funnel-graph-js/dist/js/funnel-graph.js';
var graph = new FunnelGraph({
  container: '.funnel',
  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();
@Directive({
  selector: '[appFunnelGraph]'
})
export class FunnelGraphDirective {
  style: any;
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

在my
angular.json中添加了
css

"styles": [
  "src/styles.scss",
  "./node_modules/funnel-graph-js/dist/css/main.css",
  "./node_modules/funnel-graph-js/dist/css/theme.css"
],
"scripts": [
  "./node_modules/funnel-graph-js/dist/js/funnel-graph.js"
]

在
dashboard.component.html

<div class="funnel"></div>


在HTML中应该有一个带有“漏斗”类的元素。你确定这个元素存在于你的代码中吗？@Drago96起初，我没有把这个元素放在
funnel
类中，但是你的评论是有帮助的。我做了一个
服务
，这就是我解决问题的方法。“这可能会产生一个打字错误”。。。这就是为什么我们至少应该定义一个接口：）但总而言之，这是我首选的方式，比构建服务更自然、更省力。是的，你是对的<代码>指令
方法比
服务
更简便。谢谢你的回答。Upvote.@ak.leimrey你说得对，我可能在这方面做得有点简单：）我用在线找到的一些有用的技巧更新了答案（经过测试并有效）
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DynamicScriptLoaderServiceService } from '../dynamic-script-loader-service.service';
import * as FunnelGraph from 'funnel-graph-js';

function dashboardFunnel() {
  const graph = new FunnelGraph({
    container: '.funnel',
    // gradientDirection: 'horizontal',
    data: {
      labels: ['Label 7', 'Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6'],
      colors: ['#00A8FF', '#00A8FF', '#00A8FF', '#00A8FF', '#00A8FF', '#00A8FF', '#00A8FF'],
      // color: '#00A8FF',
      values: [12000, 11000, 10000, 9000, 8000, 7000, 6000]
    },
    displayPercent: true,
    direction: 'horizontal',
  });

  graph.draw();
}

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {

  constructor(
    private dynamicScriptLoader: DynamicScriptLoaderServiceService
  ) {}


  ngOnInit() {
    this.loadScripts();
    dashboardFunnel();
  }

  private loadScripts() {
    // You can load multiple scripts by just providing the key as argument into load method of the service
    this.dynamicScriptLoader.load('chartjs', 'random-num').then(data => {
      // Script Loaded Successfully
    }).catch(error => console.log(error));
  }

}

providers: [DynamicScriptLoaderServiceService],

"styles": [
              "src/styles.scss",
              "./node_modules/funnel-graph-js/dist/css/main.css",
              "./node_modules/funnel-graph-js/dist/css/theme.css"
            ],

<div class="funnel"></div>