angular - Ionic 2: Yükleme Bileşeni İçinde İlerleme Çubuğu - InnerHTML temizleme sorunu

Uygulama başlatılırken kullanıcıyı veri indirme ilerisi hakkında bilgilendirmek için bir LoadingComponent içine bir ilerleme göstergesi eklemeye çalışıyordum.

Örnek kod :

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

Sorun, Angular 2 temizleyicisinin progressbar etiketini kaldırması, çünkü (sanırım) Yükleme içeriği bir [innerHTML] içine enjekte ediliyor.

"content" alanı yalnızca bir dize kabul ettiği için, Angular 2 temizleyicisini (DomSanitizer.bypassSecurityTrustHtml ile) atlayamıyorum.

Sorun hem temel HTML5 progress hem de ng2-bootstrap progressbar öğeleri ile ortaya çıkıyor.

Bunun için bir çözüm yolu bilen var mı? Bir şeyi mi kaçırdım? Yoksa bu, Ionic'te doğrudan düzeltilmesi gereken gerçek bir sorun mu?

Cevap #1

Çok yakındın...

Herhangi bir öğeyi any olarak yazım doğrulamasını "kapatmak" için tip doğrulamasını kapatabilirsiniz.

Kodun yorumuna bak.

Şunlarla deneyin :

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

Yardım aldı

TypeScript'te tür uyumsuzluğunu görmezden gelmenin bir yolu var mı?

Cevap #2

Sadece @Sandeep cevabını genişletmek için, loading.data nesnesini kullanmak, ilerlemeyi dinamik olarak değiştirmek amacıyla bileşen içeriğine erişim sağlar. Örneğin:

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

Umarım yardımcı olur.

İlgili makaleler