Отображать текст, который асинхронно получен в шаблоне Angular

Question

Когда я извлекаю данные асинхронным c способом, как показано ниже:

font: string;

async ngOnInit(): Promise<void> {
  this.font = await BuilderSidebarTextService.renderGoogleFontToSvgPath();
}

Как затем отобразить их в моем шаблоне?

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

Answer 1

Вы можете использовать DomSanitizer для дезинфекции html, как показано ниже,

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
  constructor(private _sanitizer: DomSanitizer) { }

  async ngOnInit(): Promise<void> {
    const response = await BuilderSidebarTextService.renderGoogleFontToSvgPath();
    if(response){
       this.font = this.transform(response);
    }
  }

  transform(value: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }