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中的错误，还是我做错了什么？

Answer 1

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

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

1 个答案: