在Angular 7中导入Bootstrap时，Bootstrap 4下拉菜单中断 [英] Bootstrap 4 dropdown breaks when importing bootstrap in Angular 7

问题描述

我在Angular 7应用中遇到了这个问题.我无法使用纯Bootstrap CSS/JS和Popper.js复制它.

I'm having this issue in an Angular 7 app. I was not able to reproduce it with pure Bootstrap CSS/JS and Popper.js.

我正在尝试使用香草Bootstrap JS和jQuery，因为我需要Bootstrap的吐司，而其他库( ng-bootstrap 和 ngx-bootstrap )不支持敬酒.

I'm trying to use vanilla Bootstrap JS and jQuery because I need Bootstrap's toasts and the other libs (ng-bootstrap and ngx-bootstrap) don't support toasts for the moment.

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

使用 npm run start

我试图问开发人员，但他一无所知: https://github.com/FezVrasta/popper.js/issues/748

I tried to ask the developer but he's clueless : 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

要从头开始复制:

1. 使用ng-cli创建一个有角度的应用程序
2. 安装引导程序和引导程序类型:
   • npm install --save bootstrap @ types/bootstrap .
   • @ types/bootstrap 需要 popper.js 作为依赖项.

1. Create an angular app with ng-cli
2. Install bootstrap and bootstrap types:
   • npm install --save bootstrap @types/bootstrap.
   • @types/bootstrap requires popper.js as a dependency.

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"
]

预期的行为是什么?

下拉菜单应切换

下拉菜单根本不会切换

我试图在我的 angular.json 文件中包含Popper ESM文件.现在一切正常，除了控制台出现错误.

I tried to include Popper ESM files in my angular.json file. Everything now works fine, except that I get an error in the console.

Uncaught SyntaxError: Unexpected token export

我在这里想念什么吗?

main.ts 中的该语句似乎破坏了下拉列表:

It seems that this statement in main.ts breaks the dropdown :

import 'bootstrap';

但是，如果我删除它，当我想做一些Bootstrap jQuery(如显示吐司或工具提示)时，Typescript会尖叫:

However, if I remove it, Typescript screams when I want to do some Bootstrap jQuery like displaying toasts or tooltips :

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

推荐答案

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

The issue you're having here is because of the typescript compiler. To circumvent that, you could initialize the tooltips and other elements in a basic JS file. You will need to import this file so create it either in the assets folder (and link it in your index.html) or in another location and mention it in the scripts part of your angular.json.

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

To initialize tooltips, the content of this JS file would be :

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

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

This would initialize all tooltips when the document gets ready.

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

If you want to do that at a specific moment in the Angular flow, wrap the call in a function like so :

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

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

To call it in a Typescript file, you'll need to first declare the function. For example, to initialize the tooltips in ngOnInit() :

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

通过这种方式，您无需在任何地方 import'bootstrap'; ，因此不会破坏其他组件.

This way you won't need to import 'bootstrap'; anywhere and so you won't break your other components.

这篇关于在Angular 7中导入Bootstrap时，Bootstrap 4下拉菜单中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！