Угловое 4 Zooming

Question

Я новичок в Angular 4 и пытаюсь найти библиотеку для масштабирования панорамирования. Я не могу найти какой-либо пакет по npm. Я попытался добавить jquery в свой проект, затем добавил jquery.panzoom, но поскольку jquery.panzoom написан на JavaScript, а мой угловой проект написан на TypeScript, @types для jquery.panzoom нет, поэтому он не работает.

Шаги, за которыми я следовал

1) установка npm - сохранение jquery

2) установка npm --save @ types / jquery

3) импортировать * как $ из 'jquery';

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

3) npm установить - сохранить 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>'.

затем, пройдя через это, я добавил

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)

Может кто-нибудь, пожалуйста, перенаправьте меня к правильному решению или другой библиотеки масштабирования.

Как то так

Обновить

попробовал этот подход, все еще не работает.

    <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 install - сохранить 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)
        });
     }