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

【问题标题】：How to use Panzoom javascript in Angular 8+?如何在 Angular 8+ 中使用 Panzoom javascript？
【发布时间】：2019-10-23 04:22:30
【问题描述】：

我无法在 Angular 中使用 Panzoom Javascript library。我明白了

ERROR
Error: panzoom is not defined

这是我到目前为止所做的stackblitz。这是working demo 的工作原理

谁能帮我解决问题？谢谢

我已按照post 中提到的所有步骤进行操作

【问题讨论】：

也许npmjs.com/package/ng2-panzoom 这个包会有所帮助？
@penleychan 不，这是不同的库。

标签： javascript angular typescript angular-cli panzoom

【解决方案1】：

看来 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);
  }
}

【讨论】：

在我的应用程序中为您的示例获取此错误。错误类型错误：无法读取未定义的属性“nativeElement”
把它包裹在if(this.scene) 周围可能你的代码在元素加载到dom之前执行我在ngAfterview Init中执行你也可以使用setTimeout进行测试
不错！这很容易
增加到150%再减少时有一个bug——它会再增加一次。

【解决方案2】：

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

在 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 文档以获取更多信息

【讨论】：