我正在嘗試從https://www.npmjs.com/package/medium-zoom實作中等縮放
這些是我遵循的步驟
ng new medium_zoom_test（Angular 13）與路由和 cssnpm install medium-zoom- 影像保存在資產中
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';
}
在為應用程式提供服務時，可以看到帶有影像的網頁。但是，懸停時沒有縮放圖示，并且影像不會在單擊時縮放。這只是一個沒有任何變化的普通網頁。
也歡迎任何實作影像縮放的替代方案。
uj5u.com熱心網友回復：
mediumZoom當傳遞的選擇器在 DOM 中沒有對應的元素時，我認為不會起作用。我的意思是你呼叫mediumZoom函式的地方組件還沒有附加到 DOM。如果你想保證你需要在ngOnInit生命周期鉤子上呼叫它。或者您可以做得更好，即定義一個應用縮放效果的指令，如下所示：
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=".."/>
堆疊閃電戰
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/421055.html
標籤：
上一篇：使用Angular的路由問題