Динамический импорт библиотеки JS во время выполнения в Angular 6

Question

Я использую Angular 6.

Я пишу приложение, используя canvas, и существует множество предварительно настроенных templates для использования с канвой.

Источникфайл сохраняется в файле .js на сервере, который извлекается, когда пользователь выбирает конкретный шаблон, и холст должен быть визуализирован снова с новым шаблоном.

В component сделано немногоеТем не менее, мой component файл содержит

import {Component, Input, OnInit} from '@angular/core';
import 'fabric';

declare const fabric: any;

@Component({
  selector: 'app-create-fb-ad-modal',
  templateUrl: './create-fb-ad-modal.component.html',
  styleUrls: ['./create-fb-ad-modal.component.css']
})
export class CreateFbAdModalComponent implements OnInit {

  @Input() product;

  canvasTemplatePath = 'https://example.com/template01.js';

  canvas: any;

  textString: string;
  backgroundImagePath = 'https://example.com/assets/bg/3.png';
  productImagePath: string;

  constructor(
  ) {
  }

  ngOnInit() {

    /**
     * Set variables
     */
    this.textString = this.product.info.title;
    this.productImagePath = this.product.info.images.main;

  }

  private _initializeCanvasTemplate()
  {
    // load canvasTemplatePath here and call the function inside the loaded
    // file with parameters
    // For example:
    // importedTemplate.renderCanvas(this.canvas, this.backgroundImagePath, this.productImagePath, this.textString);
    // this will render the canvas according to the content of template01.js
  }
}

component.html содержит

<canvas id="canvas" width="1200" height="628"></canvas>

, а файл template01.js содержит

function renderCanvas(canvas, bgImage, pImage, text)
{
    const cvBgImage = new fabric.Image.fromURL(bgImage, imgInstance => {
      imgInstance.set({
        width: canvas.width,
        height: canvas.height,
        originX: 'left',
        originY: 'top'
      });
    canvas.setBackgroundImage(imgInstance, canvas.renderAll.bind(canvas));
   });

   canvas.on('mouse:down', options => {
     canvas.setActiveObject(this.cvTextString);
     cvTextString.bringToFront();
   });

   const cvTextString = new fabric.IText(text, {
     left: 100,
     top: 220,
     fontSize: 32,
   });
   canvas.add(cvTextString);
   canvas.setActiveObject(cvTextString);

   const cvProductImage = new fabric.Image.fromURL(pImage, imgInstance => {
     imgInstance.set({
       left: 800,
       top: 120
     });

     canvas.add(imgInstance);
   });

}

Теперь я хочу загрузить файл template01.js и вызвать внутри него функцию renderCanvas(), передав значения из компонента, который будет соответственно отображать холст.

Но, как импортировать/ загрузить внешние js из URL во время выполнения, поскольку будет более 400 файлов шаблонов.

Я не уверен, правильно ли я делаю это или нет, так как я учусь Angularи это мой первый угловой проект.

Answer 1

Ваш файл сценария template01.js изменился на тип экспорта.например:

export class renderClass {
   function renderCanvas(canvas, bgImage, pImage, text) {
       //.. Your script file renderCanvas method codes.
   }
}

Далее ваш файл компонента наверх импортируйте этот метод файла сценария.Например:

import { renderClass } from './template01.js'; // (correct location of your script file)

Затем добавьте этот метод в конструктор.например:

constructor(private renderClass: renderClass) {}

следующий вызов этого метода

private _initializeCanvasTemplate() {
   this.renderClass.renderCanvas(canvas, bgImage, pImage, text);
}