Ionic 2：加载组件内的进度条 - InnerHTML消毒问题

我一直在尝试在加载组件（在应用程序启动期间通知用户关于数据下载进度）中添加进度指示器。Ionic 2：加载组件内的进度条 - InnerHTML消毒问题

为例代码：

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

的问题是，角2个消毒剂除去进度标记，因为（我想）的加载的内容内的[innerHTML的]注射。

由于“内容”字段只接受一个字符串，我不能绕过角2消毒剂（与DomSanitizer.bypassSecurityTrustHtml）。

问题与基座HTML5进度和NG2-自举进度元件发生两者。

有没有人知道这个解决方法？我错过了什么吗？或者它是一个真正的问题，应该直接修复离子？

来源

2017-01-06 Tom Demulier

你非常近...

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

看到代码的注释。

尝试用以下：

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?

来源

2017-01-08 11:02:48

事实上，我完全忘了我可以这样做，因为我不认为“string”和“safeHTML”类型是兼容的。您的解决方案适用于一个基本的HTML 但它似乎并没有对与Angular2组件（如从NG2的自举）工作。但是如果没有更好的解决方案（或Ionic2团队修复），我会将其标记为答案。 –

@Sandeep Sharma，如何在此实现中动态更改进度条的值？请帮忙 – Gowtham

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

希望它有帮助。

来源

2017-05-12 11:42:53

Ionic 2：加载组件内的进度条 - InnerHTML消毒问题

回答

相关问题