时间戳

首页 > 解决方案 > 用于在对象之间绘制线条的 Angular 库

javascript - 用于在对象之间绘制线条的 Angular 库

问题描述

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

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

标签： javascriptangulartypescriptpackageangular7

解决方案

第 1 步：安装 LeaderLine

npm i leader-line --save

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

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

Step 3：导入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')
    );
  }
}

推荐阅读