[转]解决Ionic2 innerHTML 无法嵌入HTML

[转]解决Ionic2 innerHTML 无法嵌入HTML

admin • 4周前 • 134次点击 • 来自 Ionic2

 

在ionic1 中嵌入HTML标签使用 directive方式现实，例如

  .directive('compile', ['$compile', function($compile) { return function(scope, element, attrs) { scope.$watch( function(scope) { return scope.$eval(attrs.compile); }, function(value) { element.html(value); $compile(element.contents())(scope); } ); }; }]) 

ionicV2 我们可以使用 innerHTML 例如

<p [innerHTML]="assembleHTML(session.location)"></p> 

但经过测试不行。无法动态编译。咋办？

步骤1 在项目对应的.ts 文件中引入dom_sanitization_service 例如 session-detail.ts

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

步骤2 在构造器中加入例如

  constructor(private sanitizer: DomSanitizer, public alertCtrl: AlertController, public navParams: NavParams , public navCtrl: NavController , public modalCtrl: ModalController ) { this.session = navParams.data; } 

步骤3 在export class 中添加一个方法提供现实调用例如

  assembleHTML(strHTML:any) {
      return this.sanitizer.bypassSecurityTrustHtml(strHTML); } 

这样就可以实现动态生成HTML元素了。