web-dev-qa-db-ja.com

ionic2フレームワークでビューを強制的にリロードする

通過した後 Ionic Framework を使用してログイン/ログアウト時に履歴をクリアしてページをリロードする

同じ質問を知りたいのですが、TypeScriptを使用したionic2についてです。

ログインおよびログアウト時に、構成でライブラリを実行するクラスがあるため、app.tsをリロードする必要があります。

基本的にはホームにリダイレクトしてリロードします。

ionic-frameworkionic-viewionic2
6
Basit

イオン1

私はIonic 2を使用していませんが、現在はIonic 1.2を使用しており、まだui-routerを使用している場合は、reloadを使用できます：ui-でtrue sref

または、以下のコードをログアウトコントローラーに追加できます

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});

Angular 2

使用する

$ window.location.reload（）;

または

location.reload（）;

3
Siddharth Pandey

この答えが見つかりました ここ 、（特に行this.navCtrl.setRoot(this.navCtrl.getActive().component);に注意してください。これは、現在のページをリロードするために出くわした最も簡単なソリューションですIonic 2＆3以降のバージョンのAngular（mine is 4）なので、それに応じてクレジットを支払う必要があります。

現在のページを再読み込み

_import { Component } from '@angular/core';
import { NavController, ModalController} from 'ionic-angular';

@Component({
  selector: 'page-example',
  templateUrl: 'example.html'
})
export class ExamplePage {

  public someVar: any;

  constructor(public navCtrl: NavController, private modalCtrl: ModalController) {

  }

  refreshPage() {
    this.navCtrl.setRoot(this.navCtrl.getActive().component);
  }

}
_

別のページを再読み込みしたい場合は、以下を使用してください（this.navCtrl.setRoot(HomePage);に注意してください：

_import { Component } from '@angular/core';
import { NavController, ModalController} from 'ionic-angular';
import { HomePage } from'../home/home';

@Component({
  selector: 'page-example',
  templateUrl: 'example.html'
})
export class ExamplePage {

  public someVar: any;

  constructor(public navCtrl: NavController, private modalCtrl: ModalController) {

  }

  directToNewPage() {
    this.navCtrl.setRoot(HomePage);
  }

}
_
4
maudulus

ionic 2の場合、ViewControllerでfireWillEnterをトリガーしてページのリロードを強制すると機能します

viewController.fireWillEnter();
0
paulitto

これが私にとってうまくいったことです現在のページのみを更新します-

ビューページからonDeleteを呼び出すときに、refreshMe関数を呼び出そうとしています。
page.tsファイルの外観を確認してください-

 export class MyPage {
    lines of code goes here like 
    public arr1: any;
    public arr2: any;

    public constructor(private nav: NavController, navParams: NavParams) {
      this.nav = nav;

      this.arr1 = [];
      this.arr2 = [];
      // console.log("hey array");
    }  

    onDelete() {
       perform this set of tasks...
       ...
       ...
      refreshMe()
    }


    refreshMe() {
      this.nav.setRoot(MyPage);
    }
}

これは現在のページのみを更新するだけです。
必要に応じて、ビューからこの関数を呼び出すこともできます-

<ion-col width-60 offset-30 (click)="refreshMe()">
   ....
   ....
</ion-col>
0
S.Yadav

これはハックですが、機能します。

テンプレートの調整に続くロジックをsetTimeoutでラップし、ブラウザーに更新を実行する時間を与えます。

/* my code which adjusts the ng 2 html template in some way */
setTimeout(function() {
    /* processing which follows the template change */
}, 100);
0
kris

CanReuseインターフェースを実装し、routerCanReuseをオーバーライドしてfalseを返す必要があります。次に、router.renavigate()を呼び出してみてください。

コンポーネントは次のようになります。

class MyComponent implements CanReuse {
  // your code here...
  routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { 
    return false;
  }
}

そして、ログイン/ログアウトを実行するときは、次のように呼び出します。

// navigate to home
router.renavigate()
0
Diego Ponciano

私は個人的にこれらの3行を使用して、コンポーネントを完全に更新します

let active = this.navCtrl.getActive(); // or getByIndex(int) if you know it
this.navCtrl.remove(active.index);
this.navCtrl.Push(active.component);

IonViewWillLeave（）を使用して、コンポーネントのリロード中にスプラッシュスクリーンを表示し、ロードされたらionViewDidEnter（）で非表示にすることができます。

それが役に立てば幸い

0
Jeremy Morant