javascript - “owl-carousel-o”不适用于角度 11 中的模型
问题描述
我正在使用<owl-carousel-o>
引导模型。
这里的问题如下
点击图片时,模型会打开,但是第一次按f3后数据不能正常显示,f10,f11,f12数据会显示成功。它在不使用模型并完美加载数据的同时正常工作。加载数据不需要时间。只有按 f3,f10,f12,f11 功能键后才会显示数据。我认为它的创建问题是由于 popper.min.js 或 jquery.min.js 但它们是打开模型所必需的
我也尝试过tether.min.js
但遇到同样的问题。
第一次模型看起来像:
按下功能键后图像如下:
模式代码:
<div [style.display]="showModal ? 'block' : 'none'" class="modal" id="imagemodal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="row">
<div class="container d-flex justify-content-center">
<div class="container d-flex justify-content-center">
<div class="card" style="width: 28rem;" id="mcard">
<div class="card-header bg-transparent border-bottom-0">
<button (click)=" hide()" type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<owl-carousel-o [class.owl-refreshed]="refresh" [options]="customOptions" #owlElement>
<ng-container *ngFor="let img of slidesstore">
<ng-template carouselSlide [id]="img.id">
<img style="height: 260px;width:100%;object-fit: cover;"
src='{{"assets/images/" + img.image}}' [alt]="img.name" [title]="img.name"
data-hash="five" />
<div class="card-body">
<p>{{img.id}}</p>
<h5 class="card-title">{{img.name}} </h5>
<p class="card-text">{{img.description}}</p>
</div>
</ng-template>
</ng-container>
</owl-carousel-o>
</div>
</div>
</div>
</div>
</div>
角代码:
@ViewChild('owlElement', {static: true}) owlElement: CarouselComponent;
customOptions: OwlOptions = {
loop: false,
mouseDrag: true,
touchDrag: true,
pullDrag: false,
dots: false,
navSpeed: 700,
navText: ['‹', '›'],
responsive: {
0: {
items: 1,
},
400: {
items: 1,
},
740: {
items: 1,
},
940: {
items: 1,
}
},
nav: true
}
show(id: number) {
this.owlElement.to(id + "");
this.owlElement.options = this.customOptions;
this.refresh = true;
}
谁能告诉我为什么会这样?我该如何解决这个问题?
我在CodeSandBox中附加了代码。我是 Codesandbox 的新手,所以我不知道如何在 angular.cli 中添加 jquery.min.js、popper.min.js 和 bootstrap.min.js。我在其中添加了依赖项。而且也不知道如何添加appRoutingModule
,所以我在 app.component.ts 中添加了代码,但在原始项目中它位于主组件内。
答案将不胜感激。
提前致谢。
解决方案
另一种选择:您可以使用Angular Bootstrap的 Modal 和 Carousel实现相同的效果( Carousel 在 Modal 内):
HTML:
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-slide-show">Slide Show</h4>
<button
type="button"
class="close"
aria-label="Close"
(click)="modal.close()"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ngb-carousel *ngIf="slidesStore" [activeId]="activeSlideId">
<ng-container *ngFor="let slide of slidesStore">
<ng-template ngbSlide [id]="slide.id">
<img
src="{{ 'assets/images/' + slide.image }}"
[alt]="slide.name"
[title]="slide.name"
style="height: 200px; width: 100%; object-fit: cover"
/>
<div class="card-body text-center">
<p>{{ slide.id }}</p>
<h5 class="card-title">{{ slide.name }}</h5>
<p class="card-text">{{ slide.description }}</p>
</div>
</ng-template>
</ng-container>
</ngb-carousel>
</div>
</ng-template>
零件:
constructor(private modalService: NgbModal, config: NgbCarouselConfig) {
config.showNavigationArrows = true;
config.showNavigationIndicators = true;
config.interval = 5000; // make it 0 to stop auto slide
config.animation = true;
config.keyboard = true;
}
activeSlideId = ''; // used to dynamically set the slide id
slidesStore = [
{
id: '39',
name: 'Nature Photography',
description:
'Natural photography comprises of pictures ...',
image: '1613460415834_nature-photography.jpg',
createdAt: 1613730219987,
views: 165,
},
...
]
show(id: number | string, i: number) {
this.openModal(this.content);
this.activeSlideId = id + ''; // set active slide id to start from
}
推荐阅读
- bash - 删除多个带有行号的iptables(for循环)
- java - 对两个条件查询使用相同的谓词
- android - 如何在 doInBackground() 函数之外访问我在 onLocationResult() 函数中获取的 pincode 变量?
- c# - C# 在列表中包含一个位置
- python-3.x - 同时对两个列表进行排序,但不使用选择排序
- c - 在 Linux 中使用默认 gcc 编译器时是否需要在 C 中释放指针?
- c# - Azure Function 计时器触发器能否迭代容器或目录中的所有 Blob?
- java - JAVA 和 JAVAFX 问题 - 尝试将附加控制器连接到主控制器
- javascript - 将 React 组件导出为数组的最简洁方法是什么?
- python - 美丽的汤解析网页