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

Question

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

实例代码:

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

问题是Angular 2清洁剂删除了进度条标签,因为(我想)加载内容是在[innerHTML]中注入的.

由于"content"字段只接受字符串,因此我无法绕过Angular 2清理程序(使用DomSanitizer.bypassSecurityTrustHtml).

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

有谁知道解决方法吗？我错过了什么吗？或者它是一个真正的问题,应该直接在Ionic中修复？

Answer 1

你离得很近...

您可以对任何元素进行类型断言以“关闭”类型检查。

请参阅代码的注释。

尝试以下操作：

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();
  }
}

得到了帮助

有没有办法忽略打字稿中的类型不兼容性？

Answer 2

只是为了扩展@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);
}

希望能帮助到你.