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

Question

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

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

例如：

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

您可以使用 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 )

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

score 0 · Accepted Answer

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

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

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

编辑：

3 回答 3