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