- 确保正确引入 Bootstrap 和 jQuery,可以在 angular.json 文件中配置:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
- 在组件中引入 jQuery 和 Bootstrap,例如:
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
@Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {
ngOnInit(): void {
// 轮播自动滑动
$('.carousel').carousel({
interval: 3000 // 时间间隔
});
}
}
- 如果以上方法仍无效,可以尝试在 Angular 生命周期钩子 ngAfterViewInit 中初始化轮播:
import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
@Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements AfterViewInit {
ngAfterViewInit(): void {
// 轮播自动滑动
$('.carousel').carousel({
interval: 3000 // 时间间隔
});
}
}