你可以使用 Angular 的 *ngFor 指令来展示数组的元素,并结合第三方的滑块库来实现滑块效果。可能出现点击无效的问题,可以尝试在组件中使用 ChangeDetectorRef 来强制检测变化。具体代码如下:
import { Component, ChangeDetectorRef } from '@angular/core';
import Swiper from 'swiper';
@Component({
selector: 'app-slider',
template: `
`,
})
export class SliderComponent {
elements: string[] = ['elem 1', 'elem 2', 'elem 3'];
constructor(private cdRef: ChangeDetectorRef) {}
ngAfterViewInit() {
let swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
});
swiper.on('slideChange', () => {
this.cdRef.detectChanges();
});
}
}
在组件的构造函数中注入 ChangeDetectorRef,然后在 ngAfterViewInit 中初始化 Swiper,并给滑块的 slideChange 事件绑定一个回调,在滑块切换时强制检测变化即可。