在angular中导入纯JS代码-7

Question

我第一次尝试在我的角度应用程序中导入此纯JS代码。
我创建的应用程序文件夹内的js文件和我经过那里所有找到的代码在这里 。 我增加了我的剧本里scripts在angular.json文件阵列，并设置allowJs至true 。
在我的组件JS文件中，我导入了类似的方法：

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { Util, HocrProofreader} from '../hocr';

const Utils = Util;
const Hocr = HocrProofreader;

@Component({
  selector: 'app-ocr-compiler',
  templateUrl: './ocr-compiler.component.html',
  styleUrls: ['./ocr-compiler.component.css']
})
export class OcrCompilerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
      Utils.onReady(() => {
        var hocrProofreader = new HocrProofreader({
            layoutContainer: 'layout-container',
            editorContainer: 'editor-container'
        });
      })

      const hocr = '../../assets/1.jpg';
      Hocr.prototype.setHocr(hocr)
  }
}

HTML文件看起来像这样

<div class="viewport">
  <div class="toolbar">
      <div class="logo">hOCR-Proofreader</div>

      <button id="toggle-layout-image">Image/Text</button>
      <div class="separator"></div>

      <span>Zoom:</span>
      <button id="zoom-page-full">Full Page</button>
      <button id="zoom-page-width">Page Width</button>
      <button id="zoom-original">Original</button>
      <div class="separator"></div>

      <button id="button-save">Save</button>
  </div>

  <div id="layout-container" class="container"></div>
  <div id="editor-container" class="container"></div>
</div>

导入工作正常，但我遇到错误：

AppComponent.html:1 ERROR TypeError: Cannot read property 'contentDocument' of undefined
    at Object.push../src/app/hocr.js.HocrProofreader.setHocr (hocr.js:106)

那是指这段代码：

HocrProofreader.prototype.setHocr = function (hocr, baseUrl) {
    this.hocrBaseUrl = baseUrl;
    var hocrDoc = this.editorIframe.contentDocument; <===== Here

    // TODO: use baseUrl for images/components in hOCR - use <base>?

    hocrDoc.open();
    hocrDoc.write(hocr);
    hocrDoc.close();

    var self = this;
    var hocrRoot = hocrDoc.documentElement;
    hocrRoot.addEventListener('mousemove', function (event) {
        self.mousePosition = {container: 'editor', x: event.clientX, y: event.clientY};
        self.onHover(event.target, true);
    });
    hocrRoot.addEventListener('mouseleave', function (event) {
        self.mousePosition = null;
        self.onHover(null, true);
    });
    hocrDoc.addEventListener('scroll', function (event) {
        if (!self.mousePosition || self.mousePosition.container !== 'editor') return;
        self.onHover(hocrDoc.elementFromPoint(self.mousePosition.x, self.mousePosition.y), true);
    });

    this.editorStylesheet = Util.createElem('link', {'type': 'text/css', 'rel': 'stylesheet', 'href': 'editor.css'});
    hocrDoc.head.appendChild(this.editorStylesheet);

    hocrDoc.body.contentEditable = true;

    this.setPage('first');
};

Answer 1

您绝对可以在Angular组件中使用JS。 但是有一个特殊的地方可以包含您的脚本。

您可以在angular.json文件中包含脚本。 查找脚本数组，并包含脚本的路径。

"scripts": [
   "path of your script goes here"
]

在组件中执行此操作之后，您可以在导入之前在最上方说（尽管这不是必需的）：

declare var Utils;

并使用实用工具功能。

Answer 2

这里唯一缺少的是实例化您的对象。 您可以根据需要在服务中进行操作。

HocrProofreader-service.ts

import { Injectable } from '@angular/core';

declare const Util: any;
declare const HocrProofreader: any;

@Injectable({
  providedIn: 'root'
})
export class PRService{
  private util;
  private hpf;

  constructor() {
    this.util = new Util();
    this.hpf = new HocrProofreader({
      layoutContainer: 'layout-container',
      editorContainer: 'editor-container'
    });
  }

  setHocr(hocr) {
    this.hpf.setHocr(hocr);
  }
}

让我知道这是否适合您。