Angular 12中使用Bootstrap 5：在使用JavaScript获取/创建Bootstrap实例后，bootstrap（navbar、dropdown）交互会被阻止。

Question

3

一切（导航栏，下拉菜单）都很好，直到我尝试在.ts文件中获取/创建bootstrap实例。当我插入获取/创建实例的js代码后，我无法折叠已展开的导航菜单，并且下拉菜单也无法工作！如果您注释掉以下代码部分，则一切正常！请参考此链接获取源代码。

 var modal = new Modal('#updatePwaModal');
 modal.show();

- Arnold Vakaria

2个回答

1

如果有人仍然遇到这个问题 - 上面的解决方案对我没有帮助 - 但是这个解决方案有效：

import Modal from 'bootstrap/js/dist/modal'

唯一的改变就是从语句中删除了花括号。我正在使用Vue 3组合式API，也许这就是差异所在的地方。

- Przeslijmi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arnold Vakaria · Accepted Answer

我发现了solution。这是在另一个问题中回答的，当创建模态实例时，下拉菜单会出现问题。在我的情况下，下拉菜单和导航栏都坏了！

而不是

import { Modal } from 'bootstrap';

需要的

import { Modal } from 'bootstrap/js/dist/modal';