Hur använder man Panzoom JavaScript i Angular 8+

Jag kan inte använda Panzoom Javascript-biblioteket i Angular. Jag får

ERROR
Error: panzoom is not defined

Här är stackblitzen av vad jag har gjort hittills. Här är demot som fungerar av hur det ska fungera

Kan någon hjälpa mig att felsöka? Tack

Jag har följt alla steg som nämns i detta inlägg

Svar #1

Det verkar som att Panzoom faktiskt har TypeScript-definitioner Github Issue

här är en fungerande 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);
  }
}

Svar #2

Det finns ett enkelt sätt att göra detta.

  1. Öppna ditt Angular-projekt i cmd-terminalen (rotmappen för ditt projekt, samma mapp som innehåller /src).
  2. Skriv npm install panzoom --save (det kommer att lägga till panzoom npm-paketet till din angular.json och installera det).
  3. I din komponent lägg till import import * as panzoom from "panzoom" (ditt projekt borde automatiskt länka det med rätt fil från node_modules.
  4. i ngOnInit eller var som helst det behövs lägg till den här raden panzoom.default(document.querySelector('#lipsum'));

Du bör generellt injicera detta PanZoom-paket i din komponentkonstruktor efter att ha importerat det från node_modules, men jag är inte säker på om författaren tillhandahåller någon integration.

Kolla definitivt NPM-dokumentationen för detta plugin för mer information

Relaterade artiklar