在 TypeScript 简单 Web 应用程序中使用 bootstrap Modal

Question

我想在我的 TS 应用程序中使用 bootstrap

Modal

组件。 所以，我安装了类型

npm i @types/bootstrap

然后在我的 TS 代码中

import { Modal } from "bootstrap";
const myModal = new Modal('#myModal');

当我尝试编译时，我得到：

TS2792: Cannot find module '@popperjs/core'. Did you mean to set the
'moduleResolution' option to 'nodenext', or to add aliases to the
'paths' option?

1 import * as Popper from '@popperjs/core';
                          ~~~~~~~~~~~~~~~~

node_modules/@types/bootstrap/js/dist/tooltip.d.ts:1:25 - error
TS2792: Cannot find module '@popperjs/core'. Did you mean to set the
'moduleResolution' option to 'nodenext', or to add aliases to the
'paths' option?

1 import * as Popper from '@popperjs/core';
                          ~~~~~~~~~~~~~~~~


Found 2 errors in 2 files.

Errors  Files
     1  node_modules/@types/bootstrap/js/dist/dropdown.d.ts:1
     1  node_modules/@types/bootstrap/js/dist/tooltip.d.ts:1 ```

如果我按照错误消息的建议进行操作，并添加

"moduleResolution": "NodeNext"

，我就能够成功编译，但是在运行时我在控制台中看到错误：

未捕获的类型错误：无法解析模块说明符“bootstrap”。相对引用必须以“/”、“./”或“../”开头。

那么如何使用 TypeScript 打开 Bootstrap 模式？

Answer 1

您需要确保Bootstrap导入存在，但不应该直接使用。相反，您应该使用 Modal1，它是从 dist 文件夹导入的。

由于某种原因，需要从dist文件夹导入modal，但同时也需要正常导入Bootstrap的modal。使用标准 Bootstrap 模式导入可能会破坏 JavaScript 端的各种 Bootstrap 功能。然而，如果你不导入它，什么都不会起作用。

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

showModal(bool: boolean): void {
    if (bool) {
      const myModal = new Modal1(this.modalElement?.nativeElement);
      myModal?.show();
    } else {
      const modal = Modal1.getInstance(this.modalElement?.nativeElement);
      modal?.hide();
    }
}