通过打字稿打开 bootstrap 5 模态的问题

Question

如您所知，bootstrap 5 已经发布，要通过 JavaScript 打开模式，官方网站提供以下代码。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
myModal.toggle()

问题是我正在通过 Angular 11 严格模式开发前端应用程序，所以在这种情况下打字稿不允许我使用 new bootstrap.Modal 因为它不存在。 所以请告诉我任何解决方案。

Answer 1

如果您尝试将 bootstrap 与打字稿一起使用，您很可能需要进行一些打字。您的设置可能略有不同，但查看 the documentation and using the typings from NPM，您可能可以开始使用

npm install bootstrap@next @types/bootstrap

此时，如果您需要实例化一个插件，即模态，文档指定

const bootstrap = require('bootstrap') or import bootstrap from 'bootstrap' will load all of Bootstrap’s plugins onto a bootstrap object. The bootstrap module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the /js/dist/*.js files under the package’s top-level directory.

在你的具体情况下，我相信你正在尝试做的事情类似于以下内容：

import 'bootstrap/dist/css/bootstrap.css';
import { Modal } from 'bootstrap';

const element = document.getElementById('myModal') as HTMLElement;
const myModal = new Modal(element);
myModal.show();