时间戳

首页 > 解决方案 > 在 Angular 8 中编译动态 html 字符串

typescript - 在 Angular 8 中编译动态 html 字符串

问题描述

我是 Angular 的新手，我想在我的视图中添加动态内容。我在这里提到，但 $compile 似乎在 Angular 最新版本中不再可用。

例如，以下是我在字符串 (htmlStr) 中的动态内容。

ngAfterViewInit(){
 let htmlStr = "<nb-actions size=\"small\"><nb-action icon=\"save-outline\" (click)=\"onEdit\" nbTooltip=\"Click to update a 'Company Type'.'\" nbTooltipPlacement=\"right\"></nb-action> </nb-actions>"
 $("#myelement").append(htmlStr);
}

如何编译上述字符串以便正确呈现？如果有帮助，我还可以访问我的组件上的 JQuery！我知道 Html 绑定，但它对我的情况没有帮助。

任何帮助将不胜感激！

标签： typescriptangular8

解决方案

您可以将 div 的 innerHTML 属性绑定到包含 html 内容的变量。

前任。

<div [innerHTML]="htmlStr"> </div>

您还需要做的一件事是对管道进行消毒。请参考以下代码来创建清理管道。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {
  }

  /**
   *
   * @param- v
   */
  transform(v: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(v);
  }
}

并按如下方式使用此管道：

<div [innerHTML]="htmlStr | sanitizeHtml"> </div>

推荐阅读