Ionic 2：加载组件内的进度条 - InnerHTML 清理问题答案

【问题标题】：Ionic 2 : Progressbar inside Loading Component - InnerHTML sanitize issueIonic 2：加载组件内的进度条 - InnerHTML 清理问题
【发布时间】：2017-05-12 19:42:53
【问题描述】：

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

示例代码：

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

问题在于 Angular 2 清理程序删除了进度条标签，因为（我想）加载内容被注入到 [innerHTML] 中。

由于“内容”字段只接受一个字符串，我无法绕过 Angular 2 sanitizer（使用 DomSanitizer.bypassSecurityTrustHtml）。

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

有人知道解决方法吗？我错过了什么吗？还是应该在 Ionic 中直接解决一个真正的问题？

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

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

getProgressBar(percentaje){
 let html: string = '<progress value="'+percentaje+'" max="100"></progress>';
 return this.sanitizer.bypassSecurityTrustHtml(html);
}

presentLoading(){
  let loader = this.loadingCtrl.create({
    spinner: 'hide',
  });
  loader.present();

  let counter: number = 0;
  let interval = setInterval(() => {
    loader.data.content = this.getProgressBar(counter);
    counter++;
    if (counter == 100) {
      loader.dismiss();
      clearInterval(interval);
    }
  }, 10);
}

希望对你有帮助。

【讨论】：

【解决方案2】：

你离我很近……

您可以将任何元素类型断言到 any 以“关闭”类型检查。

查看代码注释。

尝试以下方法：

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?

【讨论】：

确实，我完全忘记了我可以做到这一点，因为我认为“string”和“safeHTML”类型不兼容。您的解决方案适用于基本的 HTML ，但它似乎不适用于 Angular2 组件（例如来自 ng2-bootstrap 的）。但如果没有更好的解决方案（或 Ionic2 团队的修复），我会将其标记为答案。
@Sandeep Sharma，如何在此实现中动态更改进度条的值？请帮忙