Angular 4 Zooming

Question

我是Angular 4的新手，試圖找到平移縮放的庫。 我無法在npm上找到任何軟件包。我試圖在我的項目中添加jquery，然後添加jquery.panzoom，但由於jquery.panzoom是用JavaScript編寫的，而我的角度項目是在TypeScript中，所以jquery.panzoom沒有@types，因此它不起作用。

步驟i隨後

1）NPM安裝--save jquery的

2）NPM安裝--save @類型/ jquery的

3）進口*爲$從 '的jquery';

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

3）NPM安裝--save jquery.panzoom

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

在這裏，我得到的錯誤

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

然後通過this去後，我加入

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

我的典型ings.d.ts文件。 現在它編譯但給出了這樣的運行時錯誤

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) 

有人可以重定向我到一個正確的解決方案或不同的縮放庫。

喜歡的東西this

更新

試過這種方法，仍然無法正常工作。

<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安裝--save jquery的

• 安裝的jquery Panzoom

這些添加到角cli.json的腳本陣列

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

在模板

<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> 

在組件使用本

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) 
     }); 
    }