2

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

ERROR
Error: panzoom is not defined

这是我到目前为止所做的事情的堆栈闪电。这是它应该如何工作的工作演示

任何人都可以帮我解决问题吗？谢谢

我已经按照这篇文章中提到的所有步骤

4

2 回答 2

6

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

这是一个有效的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);
  }
}
于 2019-06-22T23:44:52.473 回答
3

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

  1. 在 cmd 终端（项目的根目录，包含 /src 的同一文件夹）中打开您的 Angular 项目。
  2. 键入npm install panzoom --save（这会将panzoomnpm 包添加到您的angular.json并安装它）。
  3. 在您的组件中添加导入import * as panzoom from "panzoom"（您的项目应自动将其与来自 node_modules 的正确文件链接。
  4. 在 ngOnInit 或任何需要的地方添加这一行panzoom.default(document.querySelector('#lipsum'));

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

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

于 2019-06-07T16:41:58.880 回答