Question

我正在尝试在div中设置innerHTML，但是文本中使用的指令将被忽略。我不确定这是否是无效的属性（根据HTML），所以下面是我的代码：

<table class="table">
<tbody>
  <tr>
    <td>
      <div [innerHTML]="issue.longText"></div>
    </td>
  </tr>
</tbody>
</table>

component.ts中issue.longText的值是：

<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span [issueOpener]='{"recordId": 4, "page":1}'>link</span>)</li></ul>

当我检查div时，我得到以下信息：

<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span>link</span>)</li></ul>

从范围中删除了

指令 issueOpener 。那么如何防止此指令？任何帮助将不胜感激。

Answer 1

这是想要的行为，这是原因：在编写Typescript代码时，您不是在编写最终应用程序。您的代码需要先编译。

要进行编译，您的代码将通过CLI运行的过程：在此过程中，编译器将每个Angular代码替换为有效的JS代码。

例如，这意味着int line = new Trace.from(StackTrace.current).terse.frames[0].line;事件变成了(click)（这并不完全是事实，但可以说明我的观点）。

使用innerHtml时，您编写最终代码：它不会被编译。它不是Angualr代码，因此不会按您希望的那样工作。

Answer 2

再说一遍，您可以做一件事，而且一定可以解决您的问题。请参考以下链接：-

您可以在ngAfterViewInit（）上编写逻辑，该逻辑应负责在现在已加载的HTML上添加指令，以便可以动态添加指令。参考：- How to dynamically add a directive?