<div [innerhtml] =“....”not =“”working =“”with =“”iframe =“”html =“”> angular2 html inject

Question

当html包含Iframe时，

<div [innerHTML]="html"></div>无效。我试图用this.sanitizer.bypassSecurityTrustResourceUrl(...做一些安全绕过，但它仍然无效。

Here's the demo，其中angular2没有正确注入。

Answer 1

Working PLUNKER

您需要使用bypassSecurityTrustHtml，并需要分配和使用 像这样清理html

this.html = this.sanitizer.bypassSecurityTrustHtml(this.html);

Answer 2

DomSanitizationService已从angular2 RC6过时了

如果您使用angular2 RC5，请使用此-

DomSanitizationService

如果您要移至angular2 RC6，请使用此-

DomSanitize

这是完整的示例

import {DomSanitizer} from '@angular/platform-browser';

然后添加结构

private sanitizer: DomSanitizer

像这样在变量上应用消毒剂

let text = <iframe width="977" height="733" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
text = this.sanitizer.bypassSecurityTrustHtml(text);
return text;

希望这会对某人有所帮助

Answer 3

this.sanitizer.bypassSecurityTrustHtml()将字符串作为输入并设置为SafeHtml。我已经在Angular 8中做到了。希望有帮助。