angular - 为什么动态添加 Angular matTooltip 不起作用?
问题描述
我有一个 SVG 元素,我想在 Angular 中的某个位置添加一个 matTooltip。我观察到,如果我尝试像这样添加 matTooltip:
generate() {
var svgEle = document.getElementById("testSVG");
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('id', "rect");
rect.setAttribute('x', "73");
rect.setAttribute('y', "95");
rect.setAttribute('class', "st01");
rect.setAttribute('width', "407");
rect.setAttribute('height', "328");
rect.setAttribute('matTooltip', "Info about the action");
svgEle.append(rect)
}
使用html测试代码:
<div style="width:400px">
<svg version="1.1" id="testSVG" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;"
xml:space="preserve">
<style type="text/css">
.st01{fill:#F99191;}
.st11{fill:#92B1F7;}
</style>
<rect x="638.5" y="146" class="st11" width="236" height="219"
matTooltip="Info about the action"/>
</svg>
</div>
<button mat-stroked-button (click)="generate()">Generate</button>
它不起作用。
在这种情况下究竟有什么问题?
解决方案
它不起作用,因为 TS 中的 Angular 是一种编译语言。
这意味着这[matTooltip]
对 TS 编译器可能意味着什么,但对于 JS 来说这是值得的。
Angular 不依赖元素属性来显示工具提示。相反(如果我没记错的话),它使用动态组件渲染来提供绝对定位的丰富组件。
如果您像这样附加工具提示,则与什么都不做一样。
推荐阅读
- vue.js - nuxtjs 在点击元素时添加和删除类
- reactjs - 当 Safari 底部栏折叠时,iPhone 底部固定导航栏中的水平滚动会中断
- c++ - Google Protobuf GetString 和 GetStringReference 似乎得到了错误的值
- javascript - 进度条的动画宽度
- java - 如何在 Java 层捕获 JNI 异常
- flutter - 如果使用 SliverStack,如何使小部件位于屏幕底部?
- elasticsearch - 读取时的 shcema 与读取时的字段提取之间的关系
- python - 选择pandas中两列或多列大于0的行
- c# - 使用 LINQ 和 XELEMENT 从 CSV 创建 XML
- python - 为什么 sqlalchemy 会抛出 `A transaction is already started no this Session` 错误?