如何在Angular 11组件TS中使用Bootstrap 5 JS

Question

我正在开发一个使用Angular 11的项目，我们想要使用Bootstrap 5原生JS，而不使用像ng-bootstrap、MDB或ngx-bootstrap这样的第三方库（我们也不使用jQuery）。我知道在TS上使用JS库并不理想。

问题是如何在Angular的TS组件中导入Bootstrap JS并使用其对象和方法。

最初我认为安装以下软件包就足够了：

npm i bootstrap@next
npm i @types/bootstrap

这两个文件已在package.json中导入，并且可以在node_modules中找到。我还在angular.json中导入了"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ]，但我仍然无法使用它们。

例如，如果我执行以下操作：

import { Carousel } from 'bootstrap';
...
carousel: Carousel | any;
...
this.carousel = document.getElementById('video-carousel')
this.carousel.interval = false;

'bootstrap' 是指 '@types/Bootstrap'。轮播图不应该自动循环，但是它确实这样做了。 每种 Bootstrap 类型都会出现此问题。

- Dialvive

---

你可以假装它是一个普通的HTML + JS页面，并包含<link>和<script>，然后简单地使用类。 - user5734311

@ChrisG 看看这个例子，它和你的一样，但是有一个折叠功能，但是它不起作用。我自己的项目也遇到了类似的问题，使用了与 OP 相似的堆栈。https://codesandbox.io/s/blue-http-qoffm?file=/src/app/app.component.html 我正在尝试解决同样的问题，因为目前唯一“固定”它的方法是使用 ng-bootstrap，而这并不是我想要的。如果你有任何想法，我全听着。 - cjaro

@ChrisG 我更喜欢避免在HTML中使用内联脚本，而是直接从组件的TS中实现。 - Dialvive

Answer 1

我认为你在使用轮播元素方面有一点错误。为了使用轮播方法，您应该使用适当的配置初始化Carousel元素。

而不是选择代表轮播的本机HTML元素，您应该创建new Carousel(elementRef, config)并通过引用类进行任何进一步的更改。

<div #carouselExampleSlidesOnly class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item red active">
      Text 1
    </div>
    <div class="carousel-item orange">
      Text 2
    </div>
    <div class="carousel-item blue">
      Text 3
    </div>
  </div>
</div>

...
 @ViewChild("carouselExampleSlidesOnly") carouselElement: ElementRef<
    HTMLElement
  >;
  carouselRef: Carousel;
...
  ngAfterViewInit() {
    this.carouselRef = new Carousel(this.carouselElement.nativeElement, {
      slide: false
    });
  }
...

这将创建一个不自动滑动的轮播元素。

以下是一个可工作的Stackblitz示例，你可以暂停和播放轮播，需要注意的是，在angular.json的scripts中导入node_modules/bootstrap/dist/js/bootstrap.js之外，还应该在styles中导入"./node_modules/bootstrap/dist/css/bootstrap.css"。

- Християн Христов

Answer 2

根据官方的bootstrap文档，Carousel需要bootstrap自己的Javascript插件和Popper.js。为了使您的轮播正常工作，请确保在Bootstrap的JavaScript之前包含popper.min.js或使用bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含Popper，这应该就可以解决问题了。我遇到了与bootstrap下拉切换相同的问题，它无法正常工作。我导入了"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]（其中包括popper），它像魔法一样正常工作了。

- Patrick André

Answer 3

即使您在angular.json中添加了node_modules/bootstrap/dist/js/bootstrap.js，您的组件可能仍无法理解。最好只添加必需的内容以支持摇树优化。

在您想要使用bootstrap功能（例如模态框）的组件中，像下面这样导入指定的bootstrap js文件。

import Bootstrap from 'bootstrap/dist/js/bootstrap';

定义一个变量来引用bootstrap的modal和@ViewChild，如下所示：

modalDirect: Bootstrap.Modal;
@ViewChild('demoModal') input;
Now create a method to open the bootstrap5 modal on click of a button
open(element): void {
  this.modalDirect = new Bootstrap.Modal(element, {});
}

现在应该可以工作了

这里你可以得到一个示例

https://github.com/aniruddhadas9/bootstrap5-angular10-without-jQuery/blob/master/src/app/components/home/home.component.ts

- Aniruddha Das

Answer 4

我曾经遇到同样的问题，后来发现我把脚本（和样式）放错了位置。一定要确保你是在正确的位置进行导入

"architect": { 
  "build": {
    "options": {
       ...
     "styles": [],
     "scripts": []
     }
  }
}

我实际上是在 "test": { .... } 内部导入我的。

- Yoss