Визуализируйте уменьшенный текст HTML из JSON и привяжите значения модели к HTML в Angular 5

Question

export class SetUpAppPopupComponent {
   constructor(public sanitizer: DomSanitizer) { }

   ngOnInit() {
      this.IFrameUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://angular.io/");
   }


  getAppHtml() {
    var MinifiedHtml = "<div> <iframe class=\"col-md-12\" style=\"display:block;height:100%\" [src]=\"IFrameUrl\" frameborder=\"0\" allowFullScreen=\"true\"></iframe> </div>"
    return this.sanitizer.bypassSecurityTrustHtml(MinifiedHtml);
   }

}

.html

<div [innerHtml]="getAppHtml()"></div>

Если вы посмотрите на приведенный выше пример, HTML обрабатывается, но объект модели JSON "IFrameUrl" не привязывается к тегу IFrame. Есть ли способ добиться этого?

Answer 1

Разве вы не можете просто сохранить всю разметку в .html и просто использовать свойство IFrameUrl в src iframe?

.html
<div>
  <iframe class="col-md-12" style="display:block;height:100%" [src]="IFrameUrl" frameborder="0" allowFullScreen="true"></iframe>
</div>

В любом случае, проблема, я думаю, в том, что при использовании этой очищенной строки будет скомпилировано значение из свойства IFramrUrl. Может быть, это работает:

var MinifiedHtml = `<iframe class="col-md-12" style="display:block;height:100%" src="${IFrameUrl}" frameborder="0" allowFullScreen="true"></iframe>`

PS: обратите внимание, что вы можете (должны) использовать шаблонные строки для построения сложных HTML / строк с интерполяцией https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings