[转]解决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元素了。