無法使用 ngx-image-zoom middlewre 在 Angular 6 項目中實現圖像縮放功能

Question

我已經在angular項目中實現了ngx-image-zoom模塊。 當我在 NgbModal 之外使用它時它工作正常。 但是，當我嘗試在NgbModal中實現它時，會進行以下觀察：

1. 圖像能夠在 NgbModal 內放大
2. 圖像能夠響應鼠標的水平移動並且能夠水平滾動
3. 但是當鼠標在圖像上垂直移動時，垂直移位/滾動不起作用

我對第三點有疑問。 當鼠標朝那個方向移動時，我希望我的圖像垂直滾動。

請在下面的 stackblitz URL 中找到工作示例：

https://stackblitz.com/edit/dynamic-carousel-in-angular-p844lu？

我在這里發布的相同代碼：

carousel.component.html：

<div class="container">
  <div class="row">
    <div class="col-md-12 py-3">
      <h3 class="pb-2">Without NgbModal working fine</h3>
      <h6 class="pb-2">Able to scroll image horizontally and Vertically</h6>
      <ngb-carousel *ngIf="event_list">
        <ng-template ngbSlide *ngFor="let event of past_events">
          <ngx-image-zoom [thumbImage]=event.img [fullImage]=event.img [magnification]="1" [enableScrollZoom]="true"
            [zoomMode]="click" [enableLens]=false>></ngx-image-zoom>
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12 py-3">
      <h3 class="pb-2">With NgbModal having problem</h3>
      <h6 class="pb-2">Please click on image below to open NgbModel</h6>
      <h6 class="pb-2">Inside model-> image is zoomed properly and responding to horizontal movement of mouse. But,
        unable to respond for vertical mouse movement</h6>

      <ngb-carousel data-interval="false" class="carousel-sm" [ngClass]="[customClass ? customClass : '']"
        [showNavigationArrows]="past_events.length > 1 ? true : false" [showNavigationIndicators]="false">
        <ng-template ngbSlide *ngFor="let event of past_events">
          <div class="row img-parent">
            <div class="col-12 img-container">
              <img src="{{ event?.img }}" class="img-sm" (click)="openModal(content, event?.img)" />
            </div>
          </div>
        </ng-template>
      </ngb-carousel>
    </div>
  </div>
</div>
<!-- ///////////// MODAL ////////////// -->

<ng-template #content let-c="close">
  <div class="modal-header">
    <button type="button" class="btn btn-close" (click)="c('Close click')" aria-label="Close">
      <i class="icon material-icons notranslate">close</i>
    </button>
  </div>
  <div class="modal-body">
    <img class="img-lg" *ngIf="past_events?.length < 1; else carouselLg" src="{{ img }} " />
  </div>
</ng-template>

<ng-template #carouselLg>
  <ngb-carousel data-interval="false" class="" [showNavigationArrows]="past_events.length > 1 ? true : false"
    [showNavigationIndicators]="false" [activeId]="activeId">
    <ng-template ngbSlide *ngFor="let event of past_events">
      <ngx-image-zoom [thumbImage]=event.img [fullImage]=event.img [magnification]="1" [enableScrollZoom]="true"
        [zoomMode]="click" [enableLens]=false>
      </ngx-image-zoom>
    </ng-template>
  </ngb-carousel>
</ng-template>

carousel.component.ts ：

import { Component, OnInit } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
@Component({
  selector: "app-carousel",
  templateUrl: "./carousel.component.html",
  styleUrls: ["./carousel.component.css"]
})
export class CarouselComponent implements OnInit {
  public activeId: string;
  public found: boolean;

  constructor(private modalService: NgbModal) {
    this.found = false;
  }
  event_list = [
    {
      event: " Event 1",
      eventLocation: "Bangalore",
      eventDescription:
        "In bangalore, first event is going to happen. Please be careful about it",
      img: "https://picsum.photos/900/500?random&t=1",
      eventStartDate: new Date("2019/05/20"),
      eventEndingDate: new Date("2019/05/24")
    },
    {
      event: " Event 2",
      eventLocation: "Dubai",
      eventDescription:
        "Dubai is another place to host so,e, first event is going to happen. Please be careful about it",
      img: "https://picsum.photos/900/500?random&t=3",
      eventStartDate: new Date("2019/07/28"),
      eventEndingDate: new Date("2019/07/30")
    },
    {
      event: " Event 3",
      eventLocation: "New York",
      eventDescription: "NewYork sits on top of event hosting",
      img: "https://picsum.photos/900/500?random&t=4",
      eventStartDate: new Date("2020/05/20"),
      eventEndingDate: new Date("2020/05/24")
    },
    {
      event: " Event 4",
      eventLocation: "Singapore",
      eventDescription: "Singapore is another great hosting city",
      img: "https://picsum.photos/900/500?random&t=6",
      eventStartDate: new Date("2018/05/20"),
      eventEndingDate: new Date("2018/05/24")
    },
    {
      event: " Event 5",
      eventLocation: "Berlin",
      eventDescription: "Berlin is best place to hang on",
      img: "https://picsum.photos/900/500?random&t=7",
      eventStartDate: new Date("2017/07/10"),
      eventEndingDate: new Date("2017/08/14")
    },
    {
      event: " Event 6",
      eventLocation: "Mumbai",
      eventDescription: "Mumbai is hub of startups",
      img: "https://picsum.photos/900/500?random&t=8",
      eventStartDate: new Date(),
      eventEndingDate: new Date()
    },
    {
      event: " Event 7",
      eventLocation: "Barcelona",
      eventDescription: "Barcelona is another good city",
      img: "https://picsum.photos/900/500?random&t=6",
      eventStartDate: new Date(),
      eventEndingDate: new Date()
    }
  ];

  upcoming_events = this.event_list.filter(
    event => event.eventStartDate > new Date()
  );
  past_events = this.event_list.filter(
    event => event.eventEndingDate < new Date()
  );
  current_events = this.event_list.filter(
    event =>
      event.eventStartDate >= new Date() && event.eventEndingDate <= new Date()
  );

  ngOnInit() {}

  openModal(content: any, activeId: string): void {
    // select the same active img for carousel in the modal that the small carousel
    this.activeId = activeId;
    this.modalService.open(content, {
      size: "lg",
      centered: true,
      windowClass: "modal-piece-gallery"
    });
  }
}

提前致謝。 任何幫助表示贊賞！

Answer 1

我沒有找到任何正常工作的 npm package 用於 Angular 圖像縮放除了ng-img-magnifier 。 這是一個有效的演示。

安裝：

npm i ng-img-magnifier

執行：

<ng-img-magnifier [thumbImage]='img'
[fullImage]='img2'> </ng-img-magnifier>

對於鏡頭、縮略圖和縮放自定義，請嘗試：

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

非常類似於 Amazon 或 W3school 圖像縮放。 我希望這能解決您的問題。