问如何在Angular 5中使用图像缩放功能

EN

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container" (mouseenter)="imageZoom('myimage', 'myresult');">
    <img id="myimage" src="https://user-images.githubusercontent.com/263237/36633897-d3237f2e-19ad-11e8-960a-daaf5ca3088a.png"
     width="300" height="240">
    <div id="myresult" class="img-zoom-result"></div>
</div>

* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
} 

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'>
</ng-img-magnifier>

$ npm install ngx-image-zoom --save

<lib-ngx-image-zoom
    [thumbImage]=myThumbnail
    [fullImage]=myFullresImage>
</lib-ngx-image-zoom>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myThumbnail="Thumb image path goes here";
  myFullresImage="Fullers image path goes here";
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }