使用DomSanitizer绕过安全性后，安全值必须使用[property] = binding

Question

<!--HTML CODE-->
<p #mass_timings"></p>

//controller code

@ViewChild('mass_timings') mass_timings: ElementRef;
constructor(private domSanitizer:DomSanitizer)
getInnerHTMLValue(){
 this.mass_timings.nativeElement.innerHTML = 
   this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);

}

但是mass_timings显示的输出包括文字： -

安全值必须使用[property] = binding

在开始

如何删除此字符串。

Answer 1

如错误消息所示，需要使用属性绑定添加已清理的HTML：

<p [innerHTML]="massTimingsHtml"></p>

constructor(private domSanitizer:DomSanitizer) {
  this.massTimingsHtml = this.getInnerHTMLValue();
}
getInnerHTMLValue(){
  return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);
}

StackBlitz example（基于Swapnil Patwa的Plunker - 见下面的评论）

Answer 2

我在使用iframe时遇到此错误，因此我使用[src]修复如下：

//In ts file
getSafeUrl() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.url);     
}
//In html
<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>

这种方法非常耗费周期，因为它会多次调用函数，因此最好在ngOnInit()等lifeCycleHooks中清理URL。

Answer 3

你需要像这样清理（）safevalue：

this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));