[轉]解決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元素了。