为什么动态添加时 Angular matTooltip 不起作用? [英] Why doesn't Angular matTooltip work when you add it dynamically?

问题描述

我有一个 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', "关于动作的信息");svgEle.append(rect)}

使用html测试代码:

<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="保留"><style type="text/css">.st01{填充:#F99191；}.st11{填充:#92B1F7；}</风格><rect x="638.5" y="146" class="st11" width="236" height="219"matTooltip="关于动作的信息"/></svg>
<button mat-stroked-button (click)="generate()">生成</button>

它不起作用.

在这种情况下到底有什么问题?

解决方案

它不起作用，因为 TS 中的 Angular 是一种编译语言.

这意味着 [matTooltip] 可能对 TS 编译器有意义，但对 JS 来说是值得的.

Angular 不依赖元素属性来显示工具提示.相反(如果我没记错的话)，它使用动态组件渲染来提供绝对定位的丰富组件.

如果像这样附加工具提示，就等于什么都不做.

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)
}

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>

it doesn't work.

What exactly is the problem in this situation?

解决方案

It doesn't work because Angular in TS is a compiled language.

It means that [matTooltip] might mean something for the TS compiler, but it's worth sh*t for the JS.

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屋！