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

Question

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

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

例如：

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

Answer 1

看这里： http://www.syntaxsuccess.com/viewarticle/ignoring-angular-2.0-bindings

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

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

对于 Dom 消毒器，导入服务

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

将其注入构造函数

constructor(private sanitizer: DomSanitizer) { 

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

this.sanitizer.bypassSecurityTrustHTML( your string here )

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

Answer 2

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

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

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

Answer 3

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

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

您可以在此处查看相关讨论： https://github.com/angular/angular/issues/13514

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

编辑：

示例：在 Angular2 TypeScript 中注释(输出(代码