要在Angular 7中使用Bootstrap的轮播图,你需要确保正确导入和使用Bootstrap的相关依赖项,并正确设置轮播图的HTML结构和初始化脚本。
以下是一个解决方法的示例:
npm install bootstrap jquery
"node_modules/bootstrap/dist/css/bootstrap.min.css"
在"scripts"数组中添加以下文件路径:
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
constructor() { }
ngOnInit() {
$(document).ready(() => {
$('#carouselExampleIndicators').carousel();
});
}
}
通过以上步骤,你应该能够在Angular 7中成功使用Bootstrap的轮播图。确保替换示例中的图片路径和组件名称以适应你的项目。