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

【问题标题】：How to use Bootstrap 5 JS in an Angular 11 component TS如何在 Angular 11 组件 TS 中使用 Bootstrap 5 JS
【发布时间】：2021-06-13 20:28:53
【问题描述】：

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

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

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

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 类型都会发生这种情况。

【问题讨论】：

你可以假装它是一个普通的旧 HTML + JS 页面，并包含和
@ChrisG 检查这个例子，它和你的一样，但是有一个崩溃，这不起作用。实际上，我自己的项目也遇到了类似的问题，该项目的堆栈与 OP 的堆栈相似。 codesandbox.io/s/blue-http-qoffm?file=/src/app/… 我正在尝试解决同样的问题，因为到目前为止唯一“修复”它的是使用 ng-bootstrap，而这并不是我真正想要的。如果您有任何想法，我会全力以赴。
@ChrisG 我宁愿避免在 HTML 中使用内联脚本，而是直接从组件的 TS 中执行。

标签： angular typescript twitter-bootstrap npm bootstrap-5

【解决方案1】：

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

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

<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 示例，您可以在其中暂停和播放轮播，请记住，除了在您的scripts 中导入node_modules/bootstrap/dist/js/bootstrap.js 之外，您还应该在angular.json 中导入"./node_modules/bootstrap/dist/css/bootstrap.css" styles.

【讨论】：

【解决方案2】：

我遇到了同样的问题，然后我意识到我在错误的地方导入了脚本（和样式）。确保你在里面导入

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

我实际上是在“test”中导入我的：{ .... }。

【讨论】：

【解决方案3】：

即使您将node_modules/bootstrap/dist/js/bootstrap.js 添加到您的angular.json 中，您的组件也可能无法理解这一点。面糊只添加什么在您的组件中需要支持摇树。

在您要使用bootstrap 功能的组件中（如 modal ），导入指定的引导 js 文件，如下所示

import Bootstrap from 'bootstrap/dist/js/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

【讨论】：

【解决方案4】：

根据官方的bootstrap文档，Carousel需要bootstrap自带的Javascript插件和Popper.js。为了让您的轮播能够正常工作，请务必在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js，这样就可以解决问题。我在引导下拉切换时遇到了同样的问题。它没有用。而不是在angular.json 中导入"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ]。我进口的 "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]（包括 popper），它就像一个魅力。

【讨论】：