在Angular 7中,使用div的innerHTML绑定会导致HTML数据不安全,这是因为Angular会自动对HTML进行编码,防止可能的XSS攻击。如果确实需要绑定位置的HTML数据,可以使用以下解决方法。
在组件中引入DomSanitizer模块:
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
在组件的构造函数中注入DomSanitizer:
constructor(private sanitizer: DomSanitizer) { }
创建一个方法,使用DomSanitizer.bypassSecurityTrustHtml()方法解除编码限制:
getSafeHtml(html: string): SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
在模板中使用上述方法绑定HTML数据:
在组件中引入DomSanitizer模块:
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
在组件的构造函数中注入DomSanitizer:
constructor(private sanitizer: DomSanitizer) { }
在模板中使用ng-bind-html指令绑定HTML数据:
确保在模块中导入NgSanitize模块:
import { NgSanitize } from 'angular-sanitize';
并将其添加到imports数组中。
首先,安装ngx-inner-html库:
npm install ngx-inner-html --save
在模块中导入NgxInnerHtmlModule:
import { NgxInnerHtmlModule } from 'ngx-inner-html';
并将其添加到imports数组中。
在模板中使用ngx-inner-html指令绑定HTML数据:
这些解决方法可以让你在Angular 7中绑定位置的HTML数据,无论是否使用HTML安全性。但请注意,绑定不受编码限制的HTML数据可能存在安全风险,请确保你信任并且可以验证这些数据的来源。