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

Question

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

之后

我想知道同样的问题，但是对于使用 typescript 的 ionic2。

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

基本上是重定向到主页并重新加载。

Answer 1

离子 1

我没有使用过 Ionic 2，但目前我使用的是 Ionic 1.2，如果他们仍在使用 ui-router，那么您可以在 ui-sref[=11= 中使用 reload: true ]

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

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

Angular 2

使用

$window.location.reload();

或

location.reload();

Answer 2

您必须实现 CanReuse 接口，并将 routerCanReuse 覆盖为 return false。然后，尝试调用 router.renavigate().

您的组件应如下所示：

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

然后，当您执行 login/logout 时，调用：

// navigate to home
router.renavigate()

Answer 3

这是一个 hack，但它有效。

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

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

Answer 4

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

viewController.fireWillEnter();

Answer 5

找到这个答案，（请特别注意 this.navCtrl.setRoot(this.navCtrl.getActive().component); 行，这是迄今为止我遇到的为 Ionic 2 & 3 及更高版本重新加载当前页面的最简单的解决方案的 Angular（我的是 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);
  }

}

Answer 6

Here is what worked for me to refresh only current page-

当我从我的视图页面调用 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>

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 框架中重新加载

force view to reload in ionic2 framework

ionic-framework

ionic-view

ionic2