[英]Image zoom issue in angular nativescript
我正在嘗試使用“nativescript-photo-zoom”和 nativescript-image-zoom 在我的角度應用程序中進行圖像縮放,但它拋出“PhotoDraweeView 不是構造函數錯誤”誰能幫助我?
我的代碼html:
<PhotoZoom [src]="photoUrl" (finalImageSet)="onFinalImageSet($event)" (failure)="onFailure($event)" (scaleChanged)="onScaleChanged($event)"></PhotoZoom>
</GridLayout>
ts:
@Component({ selector: "ns-details", moduleId: module.id, templateUrl: "./item-detail.component.html", }) 導出類ItemDetailComponent實現OnInit {
public photoUrl="https:// vignette.wikia.nocookie.net/inuyasha/images/b/b5/ Inuyasha.png";
constructor() { }
ngOnInit(): void {
const id = +this.route.snapshot.params["id"];
this.item = this.itemService.getItem(id);
}
onFinalImageSet(event) {
console.log("onFinalImageSet: ", event);
}
onFailure(event) {
console.log("onFailure: ", event);
}
onScaleChanged(event) {
console.log("onScaleChanged: ", event.object.zoomScale);
}
}
應用模塊
從“nativescript-photo-zoom/angular”導入 { NativeScriptUIPhotoZoomModule };
@NgModule({
imports: [
NativeScriptModule,
AppRoutingModule,
NativeScriptUIPhotoZoomModule
],
})
導出類 AppModule { }
嘗試使用ng-img-magnifier npm 包。 這是一個有效的DEMO 。 非常容易實現和完全可定制。
<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
[top]='top' [right]='right'
[lensWidth]='lensewidth' [lensHeight]='lensheight'
[resultWidth]='resultWidth' [resultHeight]='resultheight'
[imgWidth]='imgWidth' [imgHeight]='imgheight'>
</ng-img-magnifier>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.