Bibliothèque Angular permettant de tracer des lignes entre les objets

Question

Je suis à la recherche d'un paquet à inclure dans mon projet angulaire comme ceci : https://anseki.github.io/leader-line/

J'ai lu qu'il était assez compliqué d'importer des bibliothèques javascript vanille dans un projet typescript. Je me demandais donc si quelqu'un connaissait un équivalent de cette bibliothèque sous forme de package pour angular. J'ai cherché en ligne mais jusqu'à présent pas de chance.

Answer 1

Étape 1 : Installer LeaderLine

npm i leader-line --save

Étape 2 : L'inclure dans angular.json

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

Étape 3 : Importer la ligne de conduite, déclarer la ligne de conduite et injecter le document.

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')
    );
  }
}

Answer 2

Veuillez redémarrer ,c'est-à-dire exécuter ng serve --open et tout fonctionnera bien :)