如何在Angular 2中获取组件的未编译原始HTML内容？

Question

我希望在Angular 2中编写一个组件，用于显示和突出显示HTML代码。应该可以直接书写HTML代码，而无需使用<等转义标签。

最终，我想要编写类似如下的内容：

<my-code-component>
    <span (click)="test()">My test code</span>
</my-code-component>

应该在浏览器中显示如下：

<span (click)="test()">My test code</span>

因此，原始的HTML代码应该按照原样显示。

---

在Angular 1中，实现此功能的方法是在指令中注册一个pre-compile函数，以便它可以在被angular编译之前检索元素的内容。在Angular 2中，我所找到的只有AfterViewInit，它仅在代码已经编译后执行，因此(click)属性缺少在innerHTML中的部分。是否存在类似于Angular 2的预编译函数？

---

我发现的另一件事是ngNonBindable属性。它可以防止Angular 2编译该元素。但是，即使像这样进行测试：

<div ngNonBindable>
    <span (click)="test()">My test code</span>
</div>

不起作用。相反，它会抛出大量的InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.错误，这似乎与DOM规范中的this bug有关。

这是Angular 2的一个错误吗，还是我做错了什么？

- cdauth

---

ngNonBindable 似乎只能与插值表达式一起使用。它看起来试图编译不应该编译的内容，我的意思是，如果你把它放在 ngNonBindable 中，Angular2 不应该关心它，也不应该抛出异常。所以我不能确定，也许你可以将其作为一个功能请求提出来。 - Eric Martinez

Answer 1

事实上，(click) 不是一个有效的属性名，在 Chrome 中至少不能添加一个名为 (click) 的属性。因此，仅当 Angular 预处理 HTML 并在将模板添加到 DOM 之前解析绑定时才能使用此方法。

- Günter Zöchbauer

---

(click)是HTML标准中的有效属性名称（请参见这里），只是不是setAttribute()的有效参数（其标准参照了XML标准）。 - cdauth

这就是我记得的，但我无法在Chrome开发工具中添加它。Chrome刚刚将其删除了。 - Günter Zöchbauer