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

【问题标题】：How to tell Angular not to compile some part of template?如何告诉 Angular 不要编译模板的某些部分？
【发布时间】：2018-02-03 07:50:58
【问题描述】：

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

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

例如：

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

【问题讨论】：

【解决方案1】：

据我所知，您有两种选择：

• 您只想显示简单的代码：您可以通过在双括号周围加上双引号来“转义”双括号。如果它不起作用，您仍然可以将代码示例存储在您将使用{{myPieceOfCodeToShow}} 显示的字符串中

• 您想提供更多结果 sn-p：我知道的更简洁的解决方案是将这些 sn-ps 存储在外部文本文件中并将它们作为大字符串加载。

【讨论】：

【解决方案2】：

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

您可以使用 HTML cmets，尽管它的可读性不高，即使对于您的简短示例也是如此。不幸的是，如果您发表评论，您需要可读性。也许不适用于您的情况。

您将不得不以另一种方式记录。

编辑：

【讨论】：

【解决方案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 )

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

【讨论】：