角度 4 缩放

Posted 2023-05-07

【中文标题】角度 4 缩放

【英文标题】：Angular 4 Zooming

【发布时间】：2018-02-05 10:52:50

【问题描述】：

我是 Angular 4 的新手，并试图找到一个用于平移缩放的库。 我在 npm 上找不到任何包。我尝试在我的项目中添加 jquery，然后添加 jquery.panzoom，但是因为 jquery.panzoom 是用 javascript 编写的，而我的 angular 项目是在 TypeScript 中，所以 jquery.panzoom 没有 @types 所以它不起作用。

我遵循的步骤

1) npm install --save jquery

2) npm install --save @types/jquery

3) 从 'jquery' 导入 * 作为 $；

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

3) npm install --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;

到我的 typings.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')
        );
     
  

【问题讨论】：

您在哪里包含 panzoom 库？

types 不是必须在 typescript 中使用 js 你也可以在没有它的情况下使用

查看link，了解如何导入没有类型的第三方 js。希望有帮助

@TheUnreal 您是在询问有关导入 panzoom 的问题吗？我没有导入 panzoom，因为代码示例是 $('something').panzoom();.

@TheUnreal 我应该导入 panzoom 吗？我应该怎么做？

【参考方案1】：

npm install --save jquery

安装 jquery Panzoom

将这些添加到 angular-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)
        );