Question

我一直在尝试在LoadingComponent中添加进度指示器（以通知用户应用程序启动期间的数据下载进度）。

例子代码：

this.loading = this.loadingController.create({
    content: "<progressbar [max]="100" [value]="100" [type]="info></progressbar>"
});
this.loading.present();

问题是Angular 2清洁剂会删除进度条标记，因为（我想）加载内容是在[innerHTML]中注入的。

自＆＃34;内容＆＃34;字段只接受字符串，我不能绕过Angular 2清理程序（使用DomSanitizer.bypassSecurityTrustHtml）。

基本HTML5进度和ng2-boostrap进度条元素都会出现问题。

有谁知道解决方法吗？我错过了什么吗？或者它是否应该直接在Ionic中修复？

Answer 1

只是为了扩展@Sandeep的答案，使用loading.data对象允许访问组件内容以便动态修改进度。例如：

UICollectionView

希望它有所帮助。

Answer 2

你很近......

您可以将任意的任何元素键入断言，以“关闭”类型检查。

查看代码的评论。

尝试以下操作：

export class HomePage {
  private _htmlProperty: string = '<progress></progress>';

  constructor(public nav: NavController,
              public loadingCtrl: LoadingController,
              private _sanitizer: DomSanitizer) {    
  }

  public htmlProperty() {
       return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
  }

   presentLoading() {
    var html = <any> this.htmlProperty(); // this is the magic
    let loader = this.loadingCtrl.create({
      content: html 
    });
    loader.present();
  }
}

从

获得帮助

Is there a way to ignore type incompatibility in typescript?

离子2：加载组件中的进度条 - InnerHTML清理问题

2 个答案: