时间戳

首页 > 解决方案 > 如何将在 TypeScript 中定义为字符串的 Angular 模板解析为具有正确绑定的有效 HTML

angular - 如何将在 TypeScript 中定义为字符串的 Angular 模板解析为具有正确绑定的有效 HTML

问题描述

我想使用 ApexCharts 作为 Angular 中的一种可视化方式。ng-apexcharts 是充当包装器的 npm 包。因为 ApexCharts 的默认工具提示不适合我的设计，所以我想制作一个自定义工具提示组件。

可以通过以下方式指定自定义工具提示：

HTML：

<apx-chart ... [tooltip]="tooltip"></apx-chart>

打字稿：

@Component({...})

export class LineChartComponent implements OnInit {

  tooltip: ApexTooltip = {
    custom: ({ series, seriesIndex, dataPointIndex, w }) => {
      return "<div>Custom tooltip HTML</div>"
    }
  };
  ...
}

我有以下问题：

当试图将这样的模板定义为工具提示 HTML

`<div class="SOME_CLASS"><mat-card>${SOME_VALUE}</mat-card></div>`

并将其添加到组件的 CSS 文件中

.SOME_CLASS {
  color: red;
}

class 属性和像mat-card这样的非 HTML 组件不会转换为 DOM 中的适当表示。只是粘贴了字符串。HTML 结构可以在这里找到。

有什么方法可以让 Angular 正确绑定这个模板？

PS：我无权访问工具提示组件，因此指定

<tooltip [innerHtml]="SOME_VARIABLE"></tooltip>

也不会工作。

标签： angulartypescriptangular8

解决方案

感谢 JB Nizet 的评论，我设法实现了所需的功能。ng-template解决方案是在组件的 HTML中定义 a ，如下所示：

<apx-chart ... [tooltip]="tooltip"></apx-chart>
<ng-template #tooltipTemplate>
  <div>
    ~
    <mat-card>TEST</mat-card>
  </div>
</ng-template>

然后我必须实现TemplateRef以引用模板并创建一个EmbeddedView我可以用来获取我的 HTML 的ng-template：

export class LineChartComponent implements OnInit {
  @ViewChild("tooltipTemplate", { static: true }) tooltipTemplate: TemplateRef<any>;

  tooltipViewRef: EmbeddedViewRef<any>;

  tooltip: ApexTooltip = {
    custom: ({ series, i, j, w }) => {
      const dynamic = series[i][j].toString();
      return this.tooltipViewRef.rootNodes[0].outerHTML.replace("~", dynamic);
    }
  };

  ...

  ngOnInit() {
    this.tooltipViewRef = this.tooltipTemplate.createEmbeddedView(
      "tooltipTemplate"
    );
  }
}

这仅获取ng-template. 我使用了一个符号~来显示动态内容，因为模板是静态的。

请注意，模板内的 Font Awesome 图标将不起作用。我还没有找到实现它们的方法。

推荐阅读