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

我想在Angular 2中编写一个显示和突出显示HTML代码的组件。应该可以编写HTML代码，而不需要使用

等转义标记

最后，我想写下如下内容：

我的测试代码

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

我的测试代码

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

---

在Angular 1中，这样做的方法是在指令中注册一个前置函数，这样它就可以在Angular编译元素之前检索元素的内容。在Angular 2中，我所能找到的就是，它只有在代码已经编译之后才能执行，因此

（单击）

属性在

innerHTML

中丢失

在Angular 2中是否有预编译函数

---

我发现的另一件事是属性。它应该防止Angular 2编译元素。然而，即使这样测试：

我的测试代码

不起作用。相反，它抛出大量的

InvalidCharacterError:Failed to execute'setAttribute'on'Element'：'（click）'不是有效的属性名。

错误，这似乎与DOM规范中的错误有关

---

这是Angular 2中的错误，还是我做错了什么？

事实上

（单击）

不是有效的属性名称，至少在Chrome中，您不能添加名为

（单击）

的属性。因此，这仅在Angular在将模板添加到DOM之前对HTML进行预处理并解析绑定时有效。

似乎仅适用于插值。它似乎在试图编译一些它不应该编译的东西，我的意思是，如果你把它放在ngNonBindable angular2中，它不应该关心它，也不应该抛出它。所以我不能肯定，也许你可以要求它作为一个功能。

（单击）

是一个有效的属性名称（另请参见），它只是不是

setAttribute（）

（其引用）的有效参数。这是我记得的，但我无法在Chrome开发工具中添加它。Chrome刚刚移除了它。