【发布时间】：2021-08-04 16:00:30
【问题描述】：
我在 angular 项目中实现了 ngx-image-zoom 模块。当我在 NgbModal 之外使用它时它工作正常。但是，当我尝试在 NgbModal 中实现它时，会进行以下观察：
- 图像可以在 NgbModal 中放大
- 图像能够响应鼠标的水平移动和 可以水平滚动
- 但是当鼠标在图像上垂直移动时，垂直 移位/滚动不起作用
我对第 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"
});
}
}
提前致谢。任何帮助表示赞赏！！！
【问题讨论】：
标签： javascript html angular angular-material