Bootstrap 在 Angular 7 中导入 bootstrap 时 4 个下拉列表中断

Question

我在 Angular 7 应用程序中遇到了这个问题。我无法能够用纯 Bootstrap CSS/JS 和 Popper.js.

重现它

我正在尝试使用 vanilla Bootstrap JS 和 jQuery 因为我需要 Bootstrap 的 toasts 和其他库（ng-bootstrap 和 ngx-bootstrap) 暂时不支持吐司

最小（非）工作示例

https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue

运行它与 npm run start

Link 在 Popper.js repo

中发布

我想问开发商，但他一无所知：https://github.com/FezVrasta/popper.js/issues/748

重现问题的步骤

用例子重现：

npm i -g @angular/cli
git clone https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue.git
cd angular-bootstrap4-dropdown-issue
npm i
ng serve

从头开始重现：

使用 ng-cli 创建一个 angular 应用程序
安装 bootstrap 和 bootstrap 类型：
- npm install --save bootstrap @types/bootstrap。
- @types/bootstrap 需要 popper.js 作为依赖项。
包括Bootstrap4个CSS和JS文件
包含 Popper JS UMD 文件
在某处添加import 'bootstrap';以告诉打字稿jQuery.tooltip()函数存在
尝试在导航栏中使用Bootstrap 4 下拉菜单

相关摘录自angular.json：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@fortawesome/fontawesome-free/css/all.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/js/dist/util.js",
  "node_modules/bootstrap/js/dist/alert.js",
  "node_modules/bootstrap/js/dist/button.js",
  "node_modules/bootstrap/js/dist/carousel.js",
  "node_modules/bootstrap/js/dist/collapse.js",
  "node_modules/bootstrap/js/dist/dropdown.js",
  "node_modules/bootstrap/js/dist/modal.js",
  "node_modules/bootstrap/js/dist/scrollspy.js",
  "node_modules/bootstrap/js/dist/tab.js",
  "node_modules/bootstrap/js/dist/toast.js",
  "node_modules/bootstrap/js/dist/tooltip.js",
  "node_modules/bootstrap/js/dist/popover.js"
]

预期的行为是什么？

下拉菜单应该切换

出了什么问题？

下拉菜单根本不切换

编辑

main.ts 中的这条语句似乎破坏了下拉列表：

import 'bootstrap';

但是，如果我删除它，Typescript 在我想做一些 Bootstrap jQuery 时尖叫，比如显示祝酒词或工具提示：

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
});

Answer 1

我正在使用最新版本的 angular-cli。

首先，下载my Github project and in cmd run npm install (so all dependency is added to your system) and after run ng-serve, this will Navigate to http://localhost:4200/。

如果你这样做了，你的问题就解决了。

如果你想在你的项目中使用jquery-syntex。

在 cmd

中键入此命令

npm install jquery --save 
npm install @types/jquery --save

并在 app.component.ts

中添加此语法

import $ from 'jquery';

第二题

如果您想在设备上使用 tooltip，请使用 ngx-bootstrap。

Answer 2

您在这里遇到的问题是因为打字稿编译器。为了避免这种情况，您可以在基本 JS 文件中初始化工具提示和其他元素。您将需要导入此文件，以便在资产文件夹中创建它（并且 link 在您的 index.html 中）或在其他位置创建它，并在 scripts 部分提及它 angular.json。

要初始化工具提示，此 JS 文件的内容为：

$(() => {
  $('[data-toggle="tooltip"]').tooltip();
});

这将在文档准备就绪时初始化所有工具提示。

如果您想在 Angular 流程中的特定时刻执行此操作，请将调用包装在函数中，如下所示：

function tooltip() {
  $(() => {
    $('[data-toggle="tooltip"]').tooltip()
  })
}

要在 Typescript 文件中调用它，您需要先声明该函数。例如，要在 ngOnInit() 中初始化工具提示：

declare function tooltip();
ngOnInit() {
  tooltip();
}

这样你就不需要在任何地方import 'bootstrap';，所以你不会破坏你的其他组件。

Bootstrap 在 Angular 7 中导入 bootstrap 时 4 个下拉列表中断

Bootstrap 4 dropdown breaks when importing bootstrap in Angular 7

bootstrap-4

angular

popper.js

最小（非）工作示例

Link 在 Popper.js repo

重现问题的步骤

预期的行为是什么？

出了什么问题？

评论

编辑