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

我正在Angular 5中开发一个web应用程序，我想使用图像缩放功能，如下面链接中所述

该链接很好地解释了一些图像缩放功能，但它使用了标签中定义的java脚本

我的问题是如何在Angular 5或Angular 6中使用这些功能

谢谢

---

萨钦

试试这样的做法：

HTML:

---

试着这样做：

HTML:

---

您可以在任何js框架中使用它，因为它是纯js。但是，最好将其转换为ES6和typescript。你应该制作一个可重用的组件，其中所有的缩放逻辑都是编写的。所以为了使用Js框架，我需要在angular中加载这些.Js文件，然后使用这些功能。这就是你的意思吗？你需要将代码放在angular组件中。然后，您可以将例如图像url作为输入。这将使组件可重用。你可以在任何js框架中使用它，因为它是纯js。但是，最好将其转换为ES6和typescript。你应该制作一个可重用的组件，其中所有的缩放逻辑都是编写的。所以为了使用Js框架，我需要在angular中加载这些.Js文件，然后使用这些功能。这就是你的意思吗？你需要将代码放在angular组件中。然后，您可以将例如图像url作为输入。这将使组件可重用。感谢您提供的简单解决方案。再查询一次。您使用的方法imageZoom将在mouseenter事件中调用。此方法将做什么？同意缩放将开始，但我们需要在方法中加入一些逻辑，对吗？感谢简单的解决方案。再查询一次。您使用的方法imageZoom将在mouseenter事件中调用。这个方法会做什么？同意缩放将开始，但我们需要在方法中加入一些逻辑？

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