angular - Angular：有没有办法在模板中显示原始（原始/未编译）代码

Question

在 Angular 8 应用程序中，我需要显示原始 html 代码而不对其进行评估（如代码片段）。

例如

<div #sample>
    {{'standard-button' | translate}}
    <ng-container *ngIf="!clicked">
        {{'not' | translate}}
    </ng-container>
    {{'clicked' | translate}}
</div>

有没有办法得到下面的 html？我正在使用 highlightJS 但不幸的是它会评估插值{{}}。

先感谢您

Answer 1

你可以使用 ngNonBindable 指令告诉 Angular 不要编译或绑定当前 DOM 元素的内容。

<div ngNonBindable  #sample>
  {{'standard-button' | translate}}
  <ng-container *ngIf="!clicked">
    {{'not' | translate}}
  </ng-container>
  {{'clicked' | translate}}
</div>

Answer 2

您可以将其存储在字符串变量中

    private htmlTemplate: string = "<div #sample>
    {{'standard-button' | translate}}
    <ng-container *ngIf='!clicked'>
        {{'not' | translate}}
    </ng-container>
    {{'clicked' | translate}}
</div>"

并在模板中使用它，例如：

<div>{{htmlTemplate}}</div>