我尝试在Angular 11项目中使用Bootstrap 5.0.2,代码如下:
- 索引. html**
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>My Project</title>
<base href="/">
<meta http-equiv="content-language" content="en-US" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
- 在组件中:**
<a class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-html="true"
data-bs-placement="top"
[title]="myTitle | toHtmlEntity"
[href]="myUrl">
{{ myButtonLabel }}
</a>
没有错误信息,但工具提示不工作。标题字符串显示时,鼠标悬停在链接。
知道我错过了什么吗
5条答案
按热度按时间lc8prwob1#
要加上@yatinsingla的答案,别忘了加上
在组件类的顶部,就在导入项的下面。
所以你有:
如果您需要初始化bootstrap 5的popovers,请在ngOnInit()函数中添加javascript初始化代码(只需从bootstrap的文档中复制即可),与工具提示相同。
fcg9iug32#
package.json
angular.json
app.service.ts
mu0hgdu03#
试着在你的ts文件中写这段代码:
资料来源:https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere
hxzsmxv24#
你可以检查你的
<button>
或<a>
标签是否在*ngIf
条件内,我的例子就是这样。或
如果你有这样的,你应该把它替换成这样的东西:
或
dfty9e195#
这里的人问我们是否需要在实现引导工具提示的所有类中添加该方法。
1.我们可以在app组件中使用路由器事件并订阅它,一旦我们完成了子组件的渲染,就可以运行这个逻辑。例如,在ngOnInit app组件中使用下面的代码
此.路由器事件.订阅((事件:Event)=〉{if(NavigationEnd的事件示例){数组. from(document. querySelectorAll('button [data-bs-toggle ="工具提示"]')). forEach(工具提示节点=〉新的 Bootstrap .工具提示(工具提示节点))}
})
此处示例带有指令