Question

我试图在悬停时实现一个图像magginfier。我试图像纯JavaScript一样复制w3schools中的代码。我试图在Angular中实现以下代码

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass

我在打字稿中使用了上述方法，并从Angular的ngOnInit调用了该方法，但是我无法从该方法中获得任何结果。我确保ID正确传递并验证了该方法正在被调用。但仍然无法执行以获得任何结果。我不希望对放大器使用任何npm软件包，因为它们大多数都有错误。

component.ts

libtensorflow_inference.so

Answer 1

根据您的要求，这是一个有效的堆叠闪电战。它显示了w3school中提到的图像缩放功能的实现。 https://stackblitz.com/edit/angular-w3school-image-magnification

您尚未显示html和CSS文件。因此，我不太确定，但是以下原因可能是变焦对您不起作用的原因。

问题是使用经典DOM方法“ document.createElement”创建了img-magnifier-glass div元素。然后，再次使用经典的DOM方法（setAttribute）将“ img-magnifier-glass”类应用于该类。但是，角度封装了样式。因此，如果您在app.component.css中添加了“ .img-magnifier-glass”的类定义，则该类将不会应用于glass div，因为在模板（app.component.html）中未提及。有关更多信息，请参见此-https://github.com/angular/angular/issues/7845

要解决此问题，您可以将“ .img-magnifier-glass”类的定义移至styles.css（定义了全局样式的地方）

或者您可以将类保留在app.component.css中，但可以使用伪选择器:: ng-deep。将:: ng-deep伪类应用于任何CSS规则将完全禁用该规则的视图封装。任何应用:: ng-deep的样式都将成为全局样式。

::ng-deep .img-magnifier-glass {
}

或者您可以通过指定

来停止组件的样式封装

@Component({
// ...
encapsulation: ViewEncapsulation.None, //<<<<< this one!
styles: [
  // ...
]
})

如果您使用Renderer2（https://angular.io/api/core/Renderer2）代替此处创建诸如玻璃元素的动态元素，将会更好。 Renderer2会正确封装应用到使用它创建的元素上的类。

Answer 2

我遇到了相同的问题，但是对于具有相同实现放大器的图像缩放器。我通过调整css和ts代码（从放大镜中获取并与缩放器结合使用）来使其工作。上面的答案不是我要寻找的内容，因为我需要将缩放的img放在另一个框中，而不是在img本身的顶部。这是stackblitz代码，我对其进行了修改以满足自己的需要。

Answer 3

要在 Angular 中实现 W3School 和 Amazon 等图像放大功能，您可以使用 npm 包 ng-img-magnifier。这是有效的 DEMO。

v-autocomplete

此软件包带有完整的自定义选项。

希望这能解决您的问题。

Angular中的图像放大镜

3 个答案: