与第三方库（Angular 2+）一起使用时，自定义指令不起作用

Question

你好，我有一个自定义指令，该指令已正确链接，但是当我将其与第三方库一起使用时似乎不起作用。我知道它已正确链接，因为当我在component.html中使用它时，它工作正常。但是在component.ts中使用它时，它不起作用。

这是我的代码：

component.ts：

gantt.templates.rightside_text = ((start, end, task) => {
  return `
    <div [icon]="flag" style="height: 15px; width: 15px;"></div>
  `
});

[icon]="flag"不起作用。但是，如果我将整个return语句扔到html中，效果很好。

有什么想法为什么不起作用？

我正在使用dhtmlx甘特库。这是我正在使用的图书馆文档的链接：Here

谢谢！

Answer 1

您要实现的目标是通过String值编译Directive，这显然不是您今天可以在Angular中实现的方法。将来Angular可能会对此提供支持，因为有很多人正在寻求类似的功能。

什么是替代解决方案？

1. 您可以改用css class并通过css进行自定义。不过，这不是一个很好的解决方案。
2. 您可以创建Directive，然后将其放置在html中的第一个父对象上，并通过使用@ViewChild和Query Selector，可以找到元素并根据需要进行操作。