Ionic 2：プログレスバーの読み込みコンポーネント - InnerHTMLのサニタイズの問題

Question

LoadingComponent内に進捗インジケータを追加しようとしています（アプリケーションの起動中にデータのダウンロードの進行状況をユーザーに知らせるため）。

Exempleコード：

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

問題がローディングコンテンツは[innerHTMLの】内部に注入されている（私は仮定）ため、角度2つの消毒剤は、プログレスバーのタグを削除することです。

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

は@Sandeep答えを拡張し、loading.dataオブジェクトを使用して進捗状況を修正するために、アクセスコンポーネントのコンテンツを可能にするだけのために

Is there a way to ignore type incompatibility in typescript?

Answer 2

からの助けを取りました動的に例：

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

希望すると助かります。