与第三方库（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甘特库。 这是我正在使用的图书馆文档的链接： 这里

谢谢！

Answer 1

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

什么是替代解决方案？

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