Angular 4 innerHTML 从元素中删除指令答案

【问题标题】：Angular 4 innerHTML removes directive from the elementAngular 4 innerHTML 从元素中删除指令
【发布时间】：2018-07-30 11:48:26
【问题描述】：

我正在尝试在 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 已从 span 中删除。那么我怎样才能防止这个指令呢？任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

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

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

这意味着，例如，(click) 事件变为 onclick（这并不完全正确，但这说明了我的意思）。

当您使用innerHtml 时，您编写最终代码：它不会被编译。它不是 Angualr 代码，所以它不会像你希望的那样工作。

【讨论】：

【解决方案2】：

阿杰，你可以做一件事，这肯定会适用于你的情况。请参考以下链接：-

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

【讨论】：