我想在 Angular 组件中导入 BS 轮播，但它不起作用。 BS 样式导入得很好，因为我可以使用 BS 类。 我读了很多教程，所以我不明白我错过了什么。我看到了 ng-bootstrap 但我更喜欢没有它的解决方案。 我展示了我在以下文件中添加的相关代码。
// angular.json
[...]
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
// app.module.ts
[...]
import $ from 'jquery';
import { Carousel } from 'bootstrap';
@NgModule({
declarations: [
AppComponent,
AvisComponent,
],
imports: [
BrowserModule,
],
providers: [],
bootstrap: [
AppComponent,
AvisComponent,
]
})
// avis.component.ts
import { Component } from '@angular/core';
import $ from 'jquery';
import { Carousel } from 'bootstrap';
@Component({
selector: 'app-avis',
templateUrl: './avis.component.html',
styleUrls: ['./avis.component.css']
})
export class AvisComponent {
ngOnInit() {
console.log(Carousel); // Log the BS class
console.log($('#myCarousel).carousel()); // Log "carousel is not a function"
}
}
由于某种原因，当我从
angular.jsonindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My app</title>
<meta charset="UTF-8" />
</head>
<body>
<app-root>Loading...</app-root>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
角度.json
"options": {
"assets": [],
"index": "src/index.html",
"browser": "src/main.ts",
"outputPath": "dist/demo",
"scripts": [],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/global_styles.css"
],
"tsConfig": "src/tsconfig.app.json"
}
ts
import { Component, ElementRef, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
template: `
<div id="carouselExampleIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://placehold.co/600x400" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://placehold.co/600x400" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://placehold.co/600x400" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`,
})
export class App {
@ViewChild('myCarousel') myCarousel: ElementRef<any> | null = null;
name = 'Angular';
ngAfterViewInit() {}
}
bootstrapApplication(App);