javascript - 在 Angular 中导入纯 JS 代码 - 7

Question

我第一次尝试导入this我的 Angular 应用程序中的纯 JS 代码。
我在 App 文件夹中创建了一个 js 文件，并将位于 here 的所有代码传递到那里。 。我将脚本添加到 angular.json 文件中的 scripts 数组中，并将 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;

并使用Utils函数。