动态添加Angular matTooltip为何不起作用? [英] Why doesn't Angular matTooltip work when you add it dynamically?
问题描述
我有一个SVG元素,我想在Angular的某个位置添加一个matTooltip.我观察到,如果我尝试像这样添加matTooltip:
I have an SVG element and I want to add a matTooltip at some point in Angular. I observed that if I try to add matTooltip like this:
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测试代码:
using html test code:
<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>
它不起作用.
在这种情况下到底是什么问题?
What exactly is the problem in this situation?
推荐答案
它不起作用,因为TS中的Angular是一种编译语言.
It doesn't work because Angular in TS is a compiled language.
这意味着[matTooltip]
对于TS编译器可能有意义,但是对于JS来说值得.
It means that [matTooltip]
might mean something for the TS compiler, but it's worth sh*t for the JS.
Angular不依赖元素属性来显示工具提示.相反(如果我没记错的话),它使用动态组件渲染来提供绝对定位的丰富组件.
Angular doesn't rely on element attributes to display a tooltip. Instead (if I'm not mistaken), it uses dynamic components rendering to provide a rich component that is absolutely positioned.
如果您像这样附加工具提示,则等同于不执行任何操作.
If you append the tooltip like this, it's the same as doing nothing.
这篇关于动态添加Angular matTooltip为何不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!