web-dev-qa-db-ja.com

ionic2でpop（）の後にイオンページをリロードする方法

2ページ__Page1 and Page2_あります。 Page2でthis.nav.pop()を使用しました。Page2がポップされ、Page1が有効になりますが、Page1を更新します。前もって感謝します。

javascriptangularionic2
25
Akash Rao

親ページとnavプッシュを渡すことができます。そうすれば、親ページをnavParamterとしてアクセスできます。
親ページ内：

 goToChildPage() {
    this.navCtrl.Push(ChildPage, { "parentPage": this });
 }

子ページポップの前に、親ページの関数を呼び出すことができます

this.navParams.get("parentPage").someFnToUpdateParent();
  //or
this.navParams.get("parentPage").someFnToRefreshParent();
27
noel zubin

特にangular 2を使用しており、提案はIonic 1.を想定しているため、ここで提案されている直接のIonic実装を無視します直接のangularをionicアプリ内でionic Page1とPage2の両方でionic/angular2から「イベント」をインポートしてから、Page2で次のようにします。

this.events.publish('reloadPage1');
this.nav.pop();

そしてPage1

this.events.subscribe('reloadPage1',() => {
 this.nav.pop();
 this.nav.Push(Page1);
});
19
Jonathan Bardi

ページに次のいずれかを実装できます。

ionViewWillEnter ionViewDidEnter

NavControllerおよびページライフサイクルのドキュメントを確認してください： http://ionicframework.com/docs/v2/api/components/nav/NavController/

17
user2674268

私のために働いた簡単な解決策は、ionViewDidEnterでget serviceメソッドを再度呼び出すことでした

ionViewDidEnter() {
    this.loadGetService();
}
13
Marko

1ページ目：

import { Events } from 'ionic-angular'
constructor(public events:Events){
   this.listenEvents();
}
... ...
listenEvents(){
   this.events.subscribe('reloadDetails',() => {
    //call methods to refresh content
   });
}

2ページ目：

import { Events } from 'ionic-angular'
constructor(public events:Events, public navCtrl:NavController){
}

function(){
   this.events.publish('reloadDetails');
   this.navCtrl.pop();
}

ここにコードを入力してください

5
Silver Wing

this.nav.popを呼び出す前にイベントを送信して、ページ1自体をリロードすることを検討してください。

3
gucheen

IonViewWillEnter関数でページ1の詳細を読み込むだけです（Ionic 2）を使用します。これにより、ページ1に戻るときに初期読み込みと更新の両方が処理されます。

ドキュメントは こちら です。

ionViewWillEnter
「ページがアクティブなページに入り、アクティブなページになる直前に実行されます。」

2
AndrWeisR

ジョナサンが言ったように、イベントはionic-angularからインポートできますが、プッシュとポップを再度行う必要はなく、メソッドを呼び出してコンテンツのみをリロードします。

2ページ目：

this.events.publish('reloadDetails');
this.navCtrl.pop();

1ページ目：

this.events.subscribe('reloadDetails',() => {
    //call methods to refresh content
});

それは私のために働く。

2
Dave

同様の問題に1日半費やしました。解決策は本当に耐気候です。

Page-1からPage-2にFormGroupを渡します。ページ2のFormGroup値を更新します。 Page-2を開くと、Page-1のフォームは新しい値で更新されません。変更を監視していません。

これを修正するために、ページ2がポップされた後、ページ2コンポーネントにまだ残っている状態で、FormGroupにパッチを適用します。

これはより反応的ですが、close（）への直接呼び出しが必要です。

// Page-2 close method
public close(): void {
    this.navCtrl.pop();
    this.formGroup.patchValue(this.formGroup.value);
}

これはすべて包括的ですが、ページ1に更新が表示されます。

// Page-2 nav controller page event method
ionViewWillUnload() {
    this.formGroup.patchValue(this.formGroup.value);
}
1
Brian Duguid

ページをリロードするためのこのテクニックを見つけました：

this.navCtrl.insert(1, MyPage);
this.navCtrl.pop();
1
SiteXw

私は同じ問題を抱えていて、解決策を探して試すのに何時間も費やしました。

私が理解した場合、あなたの問題は次のとおりです。

ページ1には、API/Webサービスから取得するバインディングがいくつかあります。

ページ2にはいくつかの入力があり、戻るボタン（ポップ）を押すと、データを保存し、ページ1バインディングを更新します。

私がそれを解決した方法は、今では見つけられないStackOverflowの投稿を読んでいます:( !!

ソリューションは、注入可能なサービスを使用しています。

ページ1：

/* IMPORTS */

import { App, Nav, NavParams } from 'ionic-angular';
import { Oportunidades } from '../../services/oportunidades.service';

/* SOME BINDINGS HERE */ 
{{oportunidades.mesActual.num_testdrive}}

/* CONSTRUCTOR */
  constructor(
    private oportunidades: Oportunidades, // my injectable service!
    public app: App,
    public nav: Nav,
    public params: NavParams
  ) {

// Call to the Injectable Service (named oportunidades):
    this.oportunidades.getOportunidades();
  }

注入可能なサービス：

/* IMPORTS */ 
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class Oportunidades {

  public url = 'http://your-API.URL';
  public data: Observable<Object>;
  public mesActual: Object = [];

  constructor(private http: Http){
    //GET API DATA
    this.data = http.get(this.url).map(res => res.json());
  }

  getOportunidades() {
    this.data.subscribe(data => {
      this.mesActual = new MesActual(
        data["mes_actual_slide"].num_testdrive,
        ...
        //Here I get the API data and set it on my injectable object
      );
    });
  }
}

2ページ：

/* SOME IMPORTS */
import { NavController } from 'ionic-angular';
import { UserData } from '../../services/data.service';
import { Oportunidades } from '../../services/oportunidades.service';
import { Http, Headers, URLSearchParams } from '@angular/http';

/* SOME example BINDINGS and INPUTS: */
@Component({
  template: `
  {{ day[selectedDay].dia }}
    Input data: 
    <ion-input type="number" clearOnEdit="true"
      #ventas id="ventas" value={{day[selectedDay].ventas}}
      (keyup)="setVal(ventas.value, $event)">
    </ion-input>
  `,
  providers: [
  ]
})

export class PageInsert {

  constructor(
    public navCtrl: NavController,
    private http: Http,
    private userData: UserData,
    public oportunidades: Oportunidades // my injectable service!
  ) {

    send(selectedDay){
      var url = 'http://your.api.url/senddata';

      // I SAVE data TO API / Webservice
      this.http.post(url, params, { headers: headers })
      .map(res => res.json())
      .subscribe(
        data => { 
          console.log(data); 
          // Here i'll call to the Injectable service so It refresh's the new data on Page1 
         // in my case, this send function is called when "pop" or "back" button of ionic2 is pressed
         // This means: On click on back button -> Save and refresh data of the Injectable that is binded with the Page1
          this.oportunidades.getOportunidades(); 
          return true; },
        error => { 
          console.error("Error saving!"); 
        }
       );
    }
}

私はそれがあなたを助けることができることを願っています!!同様の問題を求めてください:)

1
gtamborero

状況によっては、pop（）の代わりにPush（）関数を使用できます。 Push（）関数を使用してページに入ると、ページがリロードされます。ナビゲーションからpage2を削除することもできます。

 this.navCtrl.Push(TabsPage).then(() => {
   const index = this.viewCtrl.index;
   this.navCtrl.remove(index);
   });

または、たとえばpage1-> page2-> pag3のように複数のページがある場合：

this.navCtrl.Push(TabsPage).then(() => {
const index = this.viewCtrl.index;
this.navCtrl.remove(index, 2); //this will remove page3 and page2
});
1
Besart Domazeti
ionViewWillEnter() {
    this.refresh();
}

ionViewWillEnterは、ページを（再）視覚化する直前に呼び出されます

0
Luca C.