Ionic 2 LoadingController 包含自定义内容答案

【问题标题】：Ionic 2 LoadingController include custom contentIonic 2 LoadingController 包含自定义内容
【发布时间】：2017-06-19 03:20:53
【问题描述】：

我想在我的 Ionic 2 项目的 LoadingController 的内容选项中使用自定义组件，但是当加载出现时，浏览器控制台会向我显示消息：

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>`
    })

【问题讨论】：

您的组件是否包含在您的 ng 模块中？
是的，它已包含在内。

标签： angular typescript ionic2

【解决方案1】：

实际上，根据the doc:，您不能这样做

content ----> string ----> 加载指示器的 HTML 内容。

所以你必须像这样传递纯的string HTML 内容：

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

【讨论】：

我知道，但是当我包含使用我的组件 TAG 的 SVG 时，也会出现错误，那么我如何才能包含使用 CSS 类制作动画的 SVG？
你有想过这个吗？我正在尝试添加一个也被剥离的离子图标。
@diff，遗憾的是我现在没有时间，但是当我找到解决方案时，我会发布它。

【解决方案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();

【讨论】：