web-dev-qa-db-ja.com

ionic2でページを更新する

ページのみ、つまりionic2の1つの画面のみを更新する方法はありますか？.

私は試した ：

window.location.reload();

そして

location.reload();

しかし、アプリを再構築します..そのページ（特定の画面）のみを更新する方法があります。

また試してみました：

<ion-input *ngIf="no_internet === 1" (click)="refresh($event)"></ion-input>

typeScriptで：

refresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
        console.log('Async operation has ended');
        refresher.complete();
    }, 2000);
}
javascripthtmlangularionic2refresher
13
Narendra Vyas

このコードを試してください：

this.navCtrl.setRoot(this.navCtrl.getActive().component);
18
Ahmad Aghazadeh

また、ionicリフレッシャーを使用して、ページ上のアクションを更新するためのプルを作成することもできます

http://ionicframework.com/docs/v2/api/components/refresher/Refresher/

3
catu

私はそれをするでしょう：（@ Ahmad Aghazadehの回答に基づいて）

this.navCtrl.Push(this.navCtrl.getActive().component).then(() => {
   let index = this.viewCtrl.index;
   this.navCtrl.remove(index);
})

=>このページをもう一度プッシュ（もう一度ロード）

=>ページを削除しました（インデックスを使用）

2
Cedric

ionic 3：の非同期関数でイオンリフレッシュを使用する例

.htmlファイルで：

<ion-content no-padding >
<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

.tsファイルで：

    constructor(...) {
     ...
    samplefuncion(null){
       asyncFunction().then(()=>{
    ...//after success call
    ...
    if (event)    
    event.complete();

    },(error)=>{
    ....
    if (event)
    event.complete();
    })
    }

         doRefresh(event) {
            samplefuncion(event);        
          }
1
Hamid Araghi

HTML：

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

</ion-content>

TypeScript：

@Component({...})
export class NewsFeedPage {

  doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

}

ソース： Ionic doc

0
developper

これを試して、1つのページをポップしてから、そのページをもう一度押してください。

this.navCtrl.pop(); 
this.navCtrl.Push(NewPage);

これが役立つことを願っています。

0
Anand_5050

共通の規則に従うことをいとわない場合、現在のビュー（そのすべてのパラメーターを含む）を再ロードする非常に簡単な方法を見つけました。 Ionic3を使用してこれをテストしましたが、まだIonic 2

すべてのページのすべての初期化コードをionViewDidLoad()に移動します。これは、ビューが初めてロードされたときに1回実行されます

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Api } from '../../providers/api';
import { Movie } from '../../interfaces/movie';

@Component({
    selector: 'page-movie-info',
    templateUrl: 'movie-info.html'
})
export class MovieInfoPage {

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public api: Api
    ) {
    }

    /**
     * Run all page initialization in this method so that this page
     * can be refreshed simply by re-calling this function
     */
    ionViewDidLoad() {
        //access any parameters provided to the page through navParams. 
        var movieId = this.navParams.data.movieId;
        this.api.movies.getById(movieId).then((movie) => {
            this.movie = movie;
        });
    }
    public movie: Movie;
}

アプリの他のどこからでも、このコードを使用して現在のビューをリロードできます

//get the currently active page component
var component = this.navController.getActive().instance;
//re-run the view load function if the page has one declared
if (component.ionViewDidLoad) {
    component.ionViewDidLoad();
}
0
TwitchBronBron