Hvordan bruke Panzoom javascript i Angular 8+?

Jeg klarer ikke å bruke Panzoom Javascript-biblioteket i Angular. Jeg får

ERROR
Error: panzoom is not defined

Her er stackblitzen av det jeg har gjort til nå. Her er den fungerende demoen av hvordan det skal fungere

Kan noen hjelpe meg med feilsøking? Takk

Jeg har fulgt alle trinnene som er nevnt i dette innlegget

Svar #1

Det ser ut til at Panzoom faktisk har TypeScript-definisjoner Github Issue

her er en fungerende 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 finnes en enkel måte å gjøre dette på.

  1. Åpne Angular-prosjektet ditt i CMD-terminalen (rotmappen til prosjektet ditt, den samme mappen som inneholder /src).
  2. Skriv npm install panzoom --save (det vil legge til panzoom npm-pakken i din angular.json og installere den).
  3. I komponenten din legg til import import * as panzoom from "panzoom" (prosjektet ditt bør automatisk koble det med riktig fil fra node_modules.
  4. i ngOnInit eller hvor som helst det trengs, legg til denne linjen panzoom.default(document.querySelector('#lipsum'));

Du bør generelt injisere dette PanZoom-pakken i komponentkonstruktøren din etter å ha importert det fra node_modules, men jeg er ikke sikker på om det finnes en integrasjon levert av en forfatter.

Sjekk definitivt NPM-dokumentasjonen for denne pluginen for mer informasjon

Relaterte artikler