javascript - 使用 ngFor 循环时,Themepunch 旋转滑块无法正常工作
问题描述
我尝试在我的网站(在 Angular 8 中开发)上使用 Themepunch 提供的滑块革命,其中包含用于 JSON 文件的动态数据。因此,我需要像这样在 index.html 中的 CSS 和 js 文件
<head>
<meta charset="utf-8">
<title>Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--Css Files-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/animate.css" rel="stylesheet">
<link href="assets/css/all.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
//Here is the css files
<link href="assets/css/rs-plugin/css/settings.css" rel="stylesheet">
<link href="assets/css/rs-plugin/css/navigation.css" rel="stylesheet">
<link href="assets/css/owl.carousel.min.css" rel="stylesheet">
<link href="assets/css/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
<!-- js Files -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.smartmenus.js"></script>
<script src="assets/js/jquery.smartmenus.bootstrap-4.js"></script>
// Here is the js files
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
我使用一个组件将滑块显示为横幅。在该组件中,我使用 asyc 调用从 json 文件中获取 json 并更新数组,在组件 HMTL 中,我使用 ngFor 循环它绑定数组数据。但是,由于 ngFor 的原因,silder 没有显示任何数据,如果我将其删除,则数据将显示。
这是打字稿代码
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit, AfterViewInit {
constructor(private file: FileService, public translate: TranslateService) { }
@Input() entity: string;
@Input() site;
main_banner: any[] = [];
revSlider: any;
ngAfterViewInit() {
this.initRevolutionSlider();
}
ngOnInit() {
this.file.get(0, 'main_banner').then(r => {
this.main_banner = r;
});
}
get lang(): string {
return this.translate.currentLang == 'ar' ? '_ar' : '_en';
}
identify(index, item) {
return index;
}
counter: number = 0;
initRevolutionSlider() {
if ($('#revolutionSlider').get(0)) {
this.revSlider = $('#revolutionSlider').show().revolution({
sliderType: 'standard',
sliderLayout: 'fullscreen',
delay: 9000,
responsiveLevels: [4096, 1200, 992, 576],
gridwidth: [1100, 920, 680, 500],
gridheight: 740,
disableProgressBar: 'on',
spinner: 'spinner3',
parallax: {
type: "on",
levels: [20, 40, 60, 80, 100],
origo: "enterpoint",
speed: 400,
bgparallax: "on",
disable_onmobile: "off"
},
navigation: {
arrows: {
enable: true
}
},
});
}
}
}
这是HTML
<div class="rev_slider_wrapper fullscreen-container">
<div id="revolutionSlider" class="rev_slider fullscreenbanner" data-version="5.4.8" >
<ul>
<li data-transition="fade" *ngFor="let n of main_banner;trackBy:identify;">
<img *ngIf="n.banner" src="{{n.banner}}"
alt=""
data-bgposition="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat"
data-kenburns="on"
data-duration="20000"
data-ease="Linear.easeNone"
data-scalestart="110"
data-scaleend="100"
data-offsetstart="250 100"
class="rev-slidebg" />
<h1 class="tp-caption font-weight-bold text-color-light text-center text-white"
data-x="center"
data-y="center" data-voffset="['-70','-70','-70','-70']"
data-width="['770','770','770','350']"
data-start="1000"
data-paddingtop="['11','11','11','16']"
data-paddingbottom="['11','11','11','16']"
data-fontsize="['50','50','45','35']"
data-lineheight="['56','56','50','40']"
data-transform_in="y:[100%];opacity:0;s:500;"
data-transform_out="opacity:0;s:500;"
style="white-space: normal;">
{{n.name_en}}
</h1>
</li>
</ul>
</div>
</div>
提前致谢
解决方案
我无法弄清楚为什么 *ngFor 不起作用,但我通过以下步骤找到了解决方法:
清除滑块 'ul' 内的所有内容并给它一个 id='rev_slider_ul'
<!--Slider--> <div class="rev_slider_wrapper"> <div id="rev_slider" class="rev_slider" data-version="5.0"> <ul id="rev_slider_ul"> </ul> </div> </div>
在 .ts 文件中导入 jquery。
declare var jQuery: any;
定义一种方法来加载带有配置的滑块
loadSlider(){ return jQuery("#rev_slider").show().revolution({ sliderType: "standard", sliderLayout: "fullwidth", scrollbarDrag: "true", navigation: { arrows: { enable: true }, touch: { touchenabled: "on", swipe_threshold: 75, swipe_min_touches: 1, swipe_direction: "horizontal", drag_block_vertical: false } }, gridwidth: 1170, gridheight: 770 }); }
迭代你需要在 ts 中迭代的对象,并用它形成一个 HTML 字符串,或者继续附加到滑块元素。
data.forEach((elem)=>{ jQuery("#rev_slider_ul").append(${elem}) });
在 forEach 循环之外和之后,加载滑块
this.loadSlider()
希望有帮助。在这里看不到太多要解释的东西,但如果有的话,欢迎提出问题。
推荐阅读
- javascript - React.Js:组件中的元素在部署后不交互
- mercury - 我可以在运行时添加谓词吗?
- python - CNN 模型训练问题(%16 准确率)
- reactjs - 一个 React NavLink 无法加载 HTML - 其他工作正常
- angular - @auth0/angular-jwt : 从解码的令牌中获取声明
- node.js - 无法访问 Node 中的 windows 环境变量
- android - StrongSwan 为 Android 内核根目录编译
- javascript - 在两个不同的模块中调用 addEVentListener 和 removeEventListener
- angular - Angular - 单击之前不可见日期选择器切换
- python - 如何对列表列表中的每个列表进行排序