скомпилировать динамическую c html строку в Angular 8

Question

Я новичок в Angular, и я хотел бы добавить динамический c контент на мой взгляд. Я упомянул здесь , но $ compile больше не доступен в Angular последней версии.

например, вот мое динамическое c содержимое в строке (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 привязке, но это не помогает в моем случае.

Любая помощь будет высоко ценится здесь!

Answer 1

Вы можете связать внутреннее свойство HTML элемента div с переменной, содержащей html содержимое.

ex.

<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>

Answer 2

Использование Внутренний Html

Внутри html: - <div>[innerHtml]="html"</div>

Внутри Ts: -

строка html = «Your Html Content"