angular - 通过 typescript 打开 Bootstrap 5 模态的问题

Question

您可能知道 bootstrap 5 已经发布，并且为了通过 JavaScript 打开模态，官方网站提供了以下代码。

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

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

Answer 1

如果您尝试使用带有 typescript 的 Bootstrap ，您很可能需要一些类型来配合它。您的设置可能会有所不同，但查看 the documentation并使用 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();