javascript - 中等缩放实现在 Angular 13 中不起作用

Question

我正在尝试从 https://www.npmjs.com/package/medium-zoom 实现中缩放

这些是我遵循的步骤

1. ng newmedium_zoom_test (Angular 13)，带有路由和 CSS
2. npm installmedium-zoom
3. 图像保存在 Assets 中

app.component.html

<h1>Zoom test</h1>
<img class="zoomy" width="50%" src="assets/image.svg">

app.component.ts

import { Component } from '@angular/core';
import mediumZoom from 'medium-zoom';

mediumZoom('.zoomy', {
  margin: 40,
  background: '#ffffff',
  scrollOffset: 40
})

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'medium_zoom_test';
}

在为应用程序提供服务时，带有图像的网页是可见的。但是，悬停时没有缩放图标，并且单击时图像不会缩放。这只是一个普通的网页，没有任何变化。

也欢迎任何实现图像缩放的替代方案。

Answer 1

当传递的选择器在 DOM 中没有相应的元素时，我认为 mediumZoom 不起作用。我的意思是，当你调用mediumZoom函数时，组件还没有附加到DOM上。如果你想保证你需要在 ngOnInit 生命周期钩子(Hook)上调用它。或者您可以做得更好，即定义一个应用缩放效果的指令，如下所示:

import mediumZoom from 'medium-zoom';

@Directive({
  selector: '[appZoomie]'
})
export class ZoomieDirective {

  constructor(private el: ElementRef) {
    mediumZoom(el.nativeElement, {
      margin: 40,
      background: '#ffffff',
      scrollOffset: 40
    })
   }
}

像这样使用它:

<img appZoomie src=".."/>

Stackblitz