lol*_*zen 5 javascript twitter-bootstrap angular-cli bootstrap-5
我想在我的 Angular 应用程序中使用 Bootstrap 5 弹出窗口。
这就是我所做的：
我的索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my website</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script>
var popover = new bootstrap.Popover(document.querySelector('.popoverable'), {
container: 'body'
})
</script>
</body>
</html>
应用程序组件.html
<button type="button" class="btn btn-secondary popoverable" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
Popover on bottom
</button>
然后在我的页面上，我看到我的样式按钮，但弹出窗口没有出现，并且在控制台中我得到一个Uncaught TypeError: this._element is undefined.
有人能解决我的问题吗？
这有点旧了，但我刚刚遇到并弄清楚了，所以我想我会为后代分享。
事实证明，当您在元素位于页面上new bootstrap.Popover 之前调用时，就会发生这种情况。它不适用于在页面上呈现的“未来”元素，在您的情况下，我认为这必须通过<app-root>元素中的 Angular 发生。当标签执行时， DOM中<script>没有。.popoverable
就我而言，我必须确保将Popover初始化推迟到之后DOMContentLoaded。
document.addEventListener("DOMContentLoaded", function (event) {
let popoverTriggerList = [].slice.call(
document.querySelectorAll('.popoverable')
);
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
在你的情况下，你必须在被渲染到 DOM 中之后才发生app-component（我对 Angular 不太熟悉，无法告诉你那会在哪里，但你需要挂钩到 的初始化生命周期组件，并且也许还确保在卸载时“断开” Popover，app-component以避免内存泄漏）。
| 归档时间： |
|
| 查看次数： |
3089 次 |
| 最近记录： |