Ionic 2 LoadingController包含自定義內容

Question

我想在Ionic 2項目的LoadingController的content選項中使用自定義組件，但是當加載完成時，瀏覽器控制台向我顯示以下消息：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

而且該組件未顯示，測試使我意識到使用其他不是標准HTML TAG的其他TAG會引發此錯誤，我如何使用angular 2安全性繞過該錯誤？ 我想的是：

    this.loadingController.create({
        spinner: 'hide',
        content: `
        <div>
            <some-component></some-component>
            <h3>a message...</h3>
        </div>`
    })

Answer 1

實際上，您不能根據文檔執行以下操作：

content ---->字符串---->加載指示符的HTML內容。

因此，您必須像這樣傳遞純string HTML內容：

content: `
      <div class="my-spinner">
        <div class="my-spinner-box"></div>
      </div>`,

Answer 2

這對我有用：

//----------imports----------
import { DomSanitizer } from '@angular/platform-browser';

//----------variables----------
safeHtml: any;

//----------constructor----------
constructor(public loadingCtrl: LoadingController, private sanitizer: DomSanitizer)

//----------your function----------
let svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox...whatever..</svg>';
// you can also add text BEFORE sanitizing
let html = svg + '<div class="loadingText">' + this.translate.instant('common.Loading') + '</div>';

this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(html);

var loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: this.safeHtml
});
loading.present();