用于在对象之间绘制线条的角度库 [关闭]答案

【问题标题】：Angular library for drawing lines between objects [closed]用于在对象之间绘制线条的角度库 [关闭]
【发布时间】：2019-07-21 07:47:34
【问题描述】：

我正在寻找一个包含在我的 Angular 项目中的包，如下所示： https://anseki.github.io/leader-line/

我读过将 vanilla javascript 库导入打字稿项目非常麻烦，所以我想知道是否有人知道这个库的等价物作为 angular 包。我在网上搜索过，但到目前为止没有运气。

【问题讨论】：

你应该没有问题将 vanilla javascript 库导入打字稿。所有 javascript 都是有效的打字稿。
stackoverflow.com/questions/54402225/… 我现在正在阅读这篇文章。我已将该文件夹导入到我的资产文件夹中，并将其导入脚本数组中的 angular.json 为“src/assets/scripts/anseki-leader-line-2cd19cd/leader-line.min.js”但是我怎么能现在用吗？尝试了一些东西，但我认为我说错了
d3 是另一个值得一看的库。
看起来很有趣！它现在在我的书签里！现在我可以看到;/*！ LeaderLine v1.0.5 (c) anseki anseki.github.io/leader-line */ 在我的 scripts.js 中，所以它被包含在内。我如何声明它以便我可以在我的打字稿文件中使用它？到目前为止没有运气
您是否尝试过安装 npm 包并像往常一样包含它？

标签： javascript angular typescript package angular7

【解决方案1】：

第 1 步：安装 LeaderLine

npm i leader-line --save

第 2 步：将其包含在 angular.json 中

 "scripts": [
               "./node_modules/leader-line/leader-line.min.js"
            ],

第三步：导入leader-line，声明LeaderLine并注入文档

import { Component, Inject, OnInit } from '@angular/core';
import {DOCUMENT} from "@angular/common";
import 'leader-line';
declare let LeaderLine: any;

@Component({
  selector: 'my-app',
  template: '<div id="d1">div 1</div><div style="height:500px"><!-- JUST SOME SPACE --></div><div id="d2"> Connect me</div>',
})
export class AppComponent implements OnInit {

  constructor(@Inject(DOCUMENT) private document){
  }

  ngOnInit() {
    new LeaderLine(
      this.document.getElementById('d1'),
      this.document.getElementById('d2')
    );
  }
}

【讨论】：

你好，我按照上述步骤操作，但是，我得到 TicketAssociatedeviceEditComponent.html:1 错误 ReferenceError: LeaderLine is not defined 请让我知道出了什么问题。我会投你一票
没有例子很难知道。我能想到几个可能的问题： - 库安装失败 - 导入不正确（在 angular.js 或 ts 文件中，检查路径） - 声明不在正确的位置（喊出类主体）我的赌注是图书馆的路径不正确。
@TomislavTuralija。我只是按照步骤操作。但我无法重现这条线。你能帮帮我吗？
@PrashanthDamam 你能更准确一点吗？你有github项目要分享吗？
Error demonstration

【解决方案2】：

请重新启动，即：再次运行ng serve --open，一切都会正常运行:)

【讨论】：