angular - Bootstrap 5 with Angular 12 : bootstrap (navbar, 下拉菜单)在通过 JavaScript 获取/创建 Bootstrap 实例后，交互被阻止

Question

在我尝试在 .ts 文件中获取/创建 Bootstrap 实例之前，一切(导航栏、下拉菜单)都工作正常。当我插入获取/创建实例 js 代码时，展开后无法折叠导航菜单，下拉菜单也不起作用!

这是 stackblitz 上的源代码

如果您注释掉以下代码部分，一切正常!

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

Answer 1

我找到了 solution在创建模态实例时下拉列表被破坏的另一个问题中得到了回答。就我而言，下拉菜单和导航栏都坏了!

代替

import { Modal } from 'bootstrap';

需要

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