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

时间:2017-08-25 09:27:54

标签: angular angular-compiler

实际案例非常简单:我想为我的库提供文档,因为我想将代码示例与示例部分一起粘贴。

所以我的问题是:如何使一部分可编辑和可执行但另一部分 - 只是一个文本(!带有双花括号)。

例如:

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

3 个答案:

答案 0 :(得分:1)

据我所知,您有两种选择:

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

显示的字符串中

•您希望提供更多后续片段:我知道更清晰的解决方案是将这些片段存储在外部文本文件中并将其作为大字符串加载。

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:0)

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

您可以使用HTML注释,但即使您的简短示例也不会具有可读性。不幸的是,如果你评论,你想要可读性。也许不适用于您的情况。

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

您必须以其他方式提供文件。

编辑:

此处示例:Commenting (out) code in Angular2 TypeScript