Как использовать Panzoom Javascript в Angular 8+?

Question

Я не могу использовать Panzoom Javascript Library в Angular. Я получаю

ERROR
Error: panzoom is not defined

Вот стекблиц того, что я сделал до сих пор. Вот рабочая демонстрация того, как она должна работать

Может ли кто-нибудь помочь мне решить проблему? Спасибо

Я выполнил все шаги, упомянутые в этой записи

Answer 1

Есть простой способ сделать это.

1. Откройте ваш угловой проект в терминале cmd (корень вашего проекта, тот же файл, который содержит /src).
2. Типnpm install panzoom --save (это добавит panzoom npm пакет к вашему angular.json и установит его).
3. В ваш компонент добавьте import import * as panzoom from "panzoom" (ваш проект должен автоматически связать его с нужным файлом из node_modules.
4. в ngOnInit или где угодно, добавьте эту строку panzoom.default(document.querySelector('#lipsum'));

Обычно вы должны внедрить этот PanZoom пакет в конструктор компонента после его импорта из node_modules, но я не уверенесли есть интеграция, предоставленная автором.

Обязательно проверьте 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);
  }
}