如何告诉 Angular 不要编译模板的某些部分？

Question

实际案例非常简单：我想为我的库提供文档，因为我想将代码示例与演示部分一起粘贴到那里。

所以我的问题是：如何使一部分可编译和可执行，而另一部分 - 只是一个文本（！带有双大括号）。

例如：

<angular-switchery [(ngModel)]="swticherModel"></angular-switchery>
Switcher: {{swticherModel? 'ON' : 'OFF'}}

Answer 1

据我所知，你有两个选择：

• 您只想显示简单的代码片段：您可以 "escape" 通过将双引号括起来来 "escape" 双括号。如果它不起作用，您仍然可以将代码示例存储在您将使用 {{myPieceOfCodeToShow}}

显示的字符串中

• 您想要提供更多后续代码段：我知道的更简洁的解决方案是将这些代码段存储在外部文本文件中并将它们作为大字符串加载。

Answer 2

据我所知，Angular 的模板没有特殊的注释语法。

您可以使用 HTML 注释，尽管它的可读性不是很好，即使对于您的简短示例也是如此。不幸的是，如果您发表评论，您需要可读性。并且可能不适用于您的情况。

您将不得不以其他方式进行记录。

编辑：

此处示例：

Answer 3

您可以使用 ngOnBindable 指令或 DomSanitizer 在显示前清理文本。

<div ngNonBindable>{{10 * 10}}</div>

对于 Dom Sanitizer，导入服务

import { DomSanitizer } from '@angular/platform-browser'

在构造函数中注入它

constructor(private sanitizer: DomSanitizer) {

然后在任何需要注入文本的地方，使用 bypassSecurityTrustHTML 方法。

this.sanitizer.bypassSecurityTrustHTML( your string here )

许多人将清理器变成管道，这样他们就可以轻松地自动清理模板中的字符串，但我不知道这是否适用于您的用例。

How to tell Angular not to compile some part of template?