根据 Bootstrap 文档,您可以通过JavaScript编程激活选项卡;例如:
const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show()
我希望能够从一个Angular 组件来实现这一点。到目前为止,我所拥有的是:
redirectTab(): void {
const tab = document.querySelector(`#TabCtl button[data-bs-target="#nav-ett"]`);
(window as any)["bootstrap"].Tab.getInstance(tab).show();
}
那个(window as any)["bootstrap"]
就像一个疼痛的拇指一样突出;我相信一定有更好的方法从Angular组件访问 Bootstrap 的API。
此代码在第一次尝试时不起作用,并抛出:
TypeError:无法读取null的属性(阅读'show')
但是如果你点击标签,然后再试一次,它就能工作了。有没有更好的方法来做到这一点?
编辑:ng-bootstrap不是答案!
1条答案
按热度按时间btxsgosb1#
使用ng-bootstrap的nav或ngx-bootstrap选项卡等软件包有一种完全不同的方法,它们提供了一种干净的、开箱即用的解决方案。