如何在 Angular 8+ 中使用 Panzoom javascript？

Question

我无法在 Angular 中使用 Panzoom Javascript library。我得到

ERROR
Error: panzoom is not defined

这是 stackblitz 我到目前为止所做的事情。这是它应该如何工作的working demo

谁能帮我解决问题？谢谢

我已按照此

中提到的所有步骤进行操作

Answer 1

有一种简单的方法可以做到这一点。

在 cmd 终端中打开您的 angular 项目（项目的根目录，包含 /src 的文件管理器）。
键入 npm install panzoom --save（这会将 panzoom npm 包添加到您的 angular.json 并安装它）。
在您的组件中添加 import import * as panzoom from "panzoom"（您的项目应该使用 node_modules.
在 ngOnInit 或任何需要的地方添加这一行 panzoom.default(document.querySelector('#lipsum'));

您通常应该在从 node_modules 导入此 PanZoom 包后将其注入组件构造函数，但我不确定作者是否提供了集成。

一定要查看此插件的 NPM 文档以获取更多信息

Answer 2

看来 Panzoom 确实有打字稿定义 Github Issue

这是一个有效的 stackblitz

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import panzoom from "panzoom";

@Component({
  selector: 'hello',
  template: `<img id="scene" #scene src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">`,
  styles: []
})
export class HelloComponent implements AfterViewInit {
  @ViewChild('scene', { static: false }) scene: ElementRef;

  ngAfterViewInit() {
    // panzoom(document.querySelector('#scene'));
    panzoom(this.scene.nativeElement);
  }
}

如何在 Angular 8+ 中使用 Panzoom javascript？

How to use Panzoom javascript in Angular 8+?

javascript

typescript

angular-cli

angular

panzoom