避免 Angular 应用程序中的值错误的三胡子

Question

我已经在几个不同的 angular 应用程序中尝试过，但都遇到了同样的错误。我已确认已安装最新版本的 Handlebars。每当我尝试使用三胡子 {{{ }}} 将 html 呈现为 html 文件中的 html 时，编译器会抛出此错误（我正在使用VSCode，但在下面的 stackblitz 中出现了同样的错误）：

Template parse errors:
Parser Error: Missing expected : at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html@9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html@9:37
Parser Error: Unexpected end of expression: {{{item}}} at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html@9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html@9:37
Parser Error: Missing expected } at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html@9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html@9:37

我复制了一个简单的 stackblitz，在其中我通过将三重大括号放在 {{{item}}} 周围来复制错误。 https://stackblitz.com/edit/angular-4kmtwp

我试过 { {{ item }} }、{{ '{' }} {{ item }} {{ '}' }}、&123;&123;&123; item &125;&125;&125;，但其中 none 渲染了 html。

Answer 1

解决方案是更改行：

<div cdkDrag class="example-box">{{{item}}}</div>

到

<div cdkDrag class="example-box" [innerHtml]="item"></div>

作为附加说明，如果您需要设置样式的 innerHtml 中有 class 个名称，您可能需要将打字稿文件中的 encapsulation 设置为 ViewEncapsulation.None。

即encapsulation: ViewEncapsulation.None

避免 Angular 应用程序中的值错误的三胡子

Triple mustache to escape value erroring in Angular app

html

mustache

handlebars.js

typescript

angular