Angular 4 Zoomen

Question

Ich bin neu in Angular 4 und versuche, eine Bibliothek für Pan Zoom zu finden. Ich kann kein Paket auf npm finden. Ich habe versucht, jquery in meinem Projekt hinzuzufügen, dann jquery.panzoom hinzugefügt, aber da jquery.panzoom in JavaScript geschrieben ist und mein eckiges Projekt in TypeScript ist, gibt es keine @types für jquery.panzoom, so dass es nicht funktioniert.

Schritte i gefolgt

1) npm installieren --save jquery

2) npm installieren --save @ Typen/jquery

3) import * wie $ von 'jquery';

//till here jquery works fine 
    $('.sample').click(function() { 
     alert('div clicked.'); 
    }); 

3) npm installieren --save jquery.panzoom

$('#panzoomDiv').panzoom(
     { 
     $zoomIn: $('.zoom-in'), 
     $zoomOut: $('.zoom-out'), 
     $zoomRange: $('.zoom-range'), 
     $reset: $('.reset') 
     } 
    ); 

hier erhalte ich die Fehler

src/app/app.component.ts (22,22): Property 'panzoom' does not exist on type 
'JQuery<HTMLElement>'. 

dann nach this durchmachen, habe ich

interface JQuery { 
    panzoom(options: any): any; 
} 

zu meinem Typ iings.d.ts-Datei. Jetzt tut es kompiliert, sondern gibt diese Laufzeitfehler

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).panzoom is not a function 
at AppComponent.webpackJsonp.117.AppComponent.ngOnInit (app.component.ts:22) 
at checkAndUpdateDirectiveInline (core.es5.js:10848) 
at checkAndUpdateNodeInline (core.es5.js:12349) 
at checkAndUpdateNode (core.es5.js:12288) 
at debugCheckAndUpdateNode (core.es5.js:13149) 
at debugCheckDirectivesFn (core.es5.js:13090) 
at Object.eval [as updateDirectives] (AppComponent_Host.html:1) 
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075) 
at checkAndUpdateView (core.es5.js:12255) 
at callWithDebugContext (core.es5.js:13475) 

kann mir bitte jemand auf eine richtige Lösung oder eine andere Zoom Bibliothek umleiten.

So etwas wie this

aktualisieren

diesen Ansatz versucht, immer noch nicht funktioniert.

<div style="display:block; padding: 10px;"> 
     <button id="btn-zoom-in-workspace" 
       class="zoom-out">Zoom Out 
     </button> 
     <button id="btn-zoom-null-workspace" 
       class="reset">Reset 
     </button> 
     <button id="btn-zoom-out-workspace" 
       class="zoom-in">Zoom In 
     </button> 
     <input type="number" class="zoom-range"> 
    </div> 
    <div id="panzoomDiv" #panzoomDiv> 
    <div> 

    import * as $ from 'jquery'; 

    @Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent implements AfterViewInit { 
    @ViewChild('panzoomDiv') panzoomDiv: ElementRef; 
    ngAfterViewInit(): void { 
     if (this.panzoomDiv) 
      $(this.panzoomDiv.nativeElement).panzoom({ 
       $zoomIn: $('.zoom-in'), 
       $zoomOut: $('.zoom-out'), 
       $zoomRange: $('.zoom-range'), 
       $reset: $('.reset') 
     }); 
    } 
    } 

Answer 1

• npm installieren --save jquery

• Installieren jquery Panzoom

diese an die Array-Skripte hinzufügen von Winkel cli.json

"scripts": [ 
"../node_modules/jquery/dist/jquery.min.js", 
"../node_modules/jquery.panzoom/dist/jquery.panzoom.min.js" 
], 

In Vorlage

<div style="display:block; padding: 10px;"> 
     <button id="btn-zoom-in-workspace" 
       class="zoom-out" #reference>Zoom Out 
     </button> 
     <button id="btn-zoom-null-workspace" 
       class="reset" #reference>Reset 
     </button> 
     <button id="btn-zoom-out-workspace" 
       class="zoom-in" #reference>Zoom In 
     </button> 
     <input type="number" class="zoom-range"> 
    </div> 
    <div id="panzoomDiv" #panzoomDiv> 
    <div> 

Im Komponente Verwendung dieses

declare var $ : any; 

@ViewChild('panzoomDiv') panzoomDiv: ElementRef; 
//get all the other element references using elementref and use it in function below 
    ngAfterViewInit(): void { 
     if (this.panzoomDiv) 
      $(this.panzoomDiv.nativeElement).panzoom({ 
       $zoomIn: $(#reference), 
       $zoomOut: $(#reference), 
       $zoomRange: $(#reference), 
       $reset: $(#reference) 
     }); 
    }