Question

我正在使用Angular 6和D3库（帮助你进行DOM操作），我在运行时使用角度材质attributtes（matTooltip）添加一些html标签。

如果我首先创建了一些结构，工具提示工作正常，但如果我实时添加相同的结构则不起作用。

我想这是由于使用angular进行编译的过程，我想知道是否有办法解决这个问题。

我创建了一个基本的例子，你可以看到我解释的内容。在app.component.html中有一个带有工具提示的g标签，工作正常。在app.component.ts中，我在运行时添加了相同的标记，但没有。

Answer 1

它不起作用，因为第一种情况是在编译之前，而第二种情况在编译之后是。

用更容易理解的方式来表达它：

当你写

<g id="tick1" matTooltip="200">

在编译时，Angular会读取此标记，并了解它必须通过指令显示工具提示。

因此它会用matTooltip之类的内容替换此data-mat-tooltip="200"属性，并在样式表中使用它来显示工具提示，例如

g[data-mat-tooltip]:after {
  content: attr(data-mat-tooltip);
  // Styles & animations
}

另一方面，当您在组件的逻辑中创建代码时，代码将被编译，并在编译后添加属性。

matTooltip不是HTML属性，没有任何反应。

如果你想解决这个问题，你可以看一下how the directive works（在困难时期），或者你可以尝试使用你使用的第一个解决方案，在我看来，这是最简单的一个。