Question

经过Clear History and Reload Page on Login/Logout Using Ionic Framework

之后

我想知道同样的问题，但对于ionic2使用打字稿。

登录和注销时我需要重新加载app.ts，因为有些类在构造上运行库。

它基本上会重定向到家并重新加载。

Answer 1

找到了这个答案here，（请特别注意this.navCtrl.setRoot(this.navCtrl.getActive().component);行，这是迄今为止我遇到的最简单的解决方案，用于重新加载Ionic 2＆amp; 3及更高版本的现有页面Angular（我的是4），所以应该相应的信用：

RELOAD CURRENT PAGE

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

}

Answer 2

离子1

我还没有使用Ionic 2，但目前我正在使用Ionic 1.2，如果他们仍在使用ui-router而不是你可以使用reload：在ui-sref中是真的

或者您可以将以下代码添加到您的注销控制器

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

Angular 2

使用

$ window.location.reload（）;

或

location.reload（）;

Answer 3

您必须实施CanReuse界面，并覆盖routerCanReuse以返回false。然后，尝试拨打router.renavigate()。

您的组件应如下所示：

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

然后，当您执行登录/注销时，请致电：

// navigate to home
router.renavigate()

Answer 4

这是一个黑客，但它确实有效。

在setTimeout中包含模板调整之后的逻辑，这会让浏览器有时间进行刷新：

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

Answer 5

对于离子2，当您通过在视图控制器上触发fireWillEnter强制页面重新加载时，它适用于我

viewController.fireWillEnter();

Answer 6

以下是 仅刷新当前页面 对我有用的作品 -

当我从我的视图页面调用onDele时，我试图调用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);
    }
}

这只是刷新当前页面。
如果我们需要as -

，我们也可以从视图中调用此函数

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

Answer 7

我个人使用这三行代码来完全刷新组件

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

您可以在重新加载组件时使用ionViewWillLeave（）显示初始屏幕，然后在加载后使用ionViewDidEnter（）将其隐藏。

希望有帮助

强制视图在ionic2框架中重新加载

7 个答案: