Angular：有没有办法在模板中显示原始（original/not 已编译）代码

Question

在 Angular 8 应用程序中，我需要显示没有评估的原始 html 代码（如代码片段）。

例如

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

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

提前致谢

Answer 1

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

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

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

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

Answer 2

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

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

Angular：有没有办法在模板中显示原始（original/not 已编译）代码

Angular: is there a way to display raw (original/not compiled) code in a template

syntax-highlighting

string-interpolation

highlightjs

angular