ボタンをクリックしてイオンリフレッシャーを使用する

Question

私は単純なfirebaseイメージのアップロードページで作業しています。しかし、アップロード後のファイルイメージは、URLが同じであるため、自己更新しません。しかし私はそれが同じであることを望む。だから私は新しいイメージを取得するために元気づけた、それは完全に動作しますが、私は上からプルダウンしなければなりません。

ボタンをクリックしてアップロードを完了したらこの機能を実行したいと思います。

 <ion-refresher (ionRefresh)="doRefresh($event)"> 
     <ion-refresher-content 
      pullMin="100" 
      pullingIcon="arrow-dropdown" 
      pullingText="Yenilemek için çekin" 
      refreshingSpinner="circles"> 
     </ion-refresher-content> 
     </ion-refresher> 
<img src="{{ ppURL }}"> 

ts;

 doRefresh(refresher) { 

    const ppRef = storage().ref(`ProfilePictures/${this.myUid}`) 
    ppRef.getDownloadURL().then(url => { 
     this.ppURL = url 

     refresher.complete(); 
    }).catch(err => { 
     // Handle errors 

    }); 
    } 

プルダウンしても画像がよく更新されます。私はこの機能を他の機能（クリックボタン）で実行することはできません。

this.doRefresh(); 

このコマンドはエラーを示します。とにかくそれを修正することを知っていますか？

Answer 1

恐らくリフレッシャーは必要ありません。リフレッシャーは、ユーザーがプルダウンできるように設計されています。 しかし、あなたはここに

https://github.com/ionic-team/ionic/blob/master/src/components/refresher/refresher.ts

リフレッシャーコードを見ればあなたは_beginRefresh関数を呼び出していることをトリガーすることができるはずです。 AngularのViewChildメカニズムを使用してRefresherオブジェクトを保持することができます。

Answer 2

refresherオブジェクトを想定しているため、使用できません。したがって、以下のように新しいメソッドを作成し、buttonを使って起動してください。

refreshImage() { 
    const ppRef = storage().ref(`ProfilePictures/${this.myUid}`) 
    ppRef.getDownloadURL().then(url => { 
     this.ppURL = url;  
    }).catch(err => { 
     // Handle errors 
    }); 
    } 

注：したい場合、あなたはそれがDRYを次のtoo.Thenの上使用してdoRefresh()方法をリファクタリングすることができます。

Answer 3

refresherのパラメータは、他の場所のコールがrefresherオブジェクトを通過しないため、省略可能です。

doRefresh(refresher?:any) { //"?" in typescript means the parameter is optional 

    const ppRef = storage().ref(`ProfilePictures/${this.myUid}`) 
    ppRef.getDownloadURL().then(url => { 
     this.ppURL = url 

     refresher && refresher.complete();//make sure refresher is truthy before calling complete 
    }).catch(err => { 
    // Handle errors 

    }); 
} 

このようにして、doRefreshの機能が効果的にオーバーロードされます。