angular - 如何在 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 中，方法是注册一个预 compile指令中的函数，以便它可以在 angular 编译之前检索元素的内容。在 Angular 2 中，我只能找到 AfterViewInit ，仅在代码已编译后执行，因此 innerHTML 中缺少 (click) 属性。

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. 错误，这似乎与 this bug 有关在 DOM 规范中。

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

Answer 1

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