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

讓我知道這是否適合您。