如何在 Ionic 中替换当前页面？答案

【问题标题】：How to replace current page in Ionic?如何在 Ionic 中替换当前页面？
【发布时间】：2019-04-13 01:37:43
【问题描述】：

我有这个流程：

联系人页面 -> navController.push(NewContact) -> navController.push(ContactCreated)

如何在 ContactCreated 页面上使“返回”按钮将用户返回到根“联系人”页面而不是 NewContact 页面？所以我想替换导航堆栈中的一个页面。

我正在使用 Ionic 3。

【问题讨论】：

标签： angular typescript ionic-framework ionic3

【解决方案1】：

您可以如下所示进行操作。这是doc。

import { Navbar } from 'ionic-angular';

@Component({
  selector: 'your-page',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>
           Your Page
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content>
    ...
    </ion-content>
   `
})
export class YourPage {
  @ViewChild(Navbar) navBar: Navbar;
  constructor(private navController: NavController){}

  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
      this.navController.setRoot('Contacts');
    }
  }
}

【讨论】：

【解决方案2】：

只需使用popToRoot() function 而不是pop()。

this.navCtrl.popToRoot ();

【讨论】：

【解决方案3】：

在 push 之后立即执行 pop 并禁用动画：

this.navCtrl.pop({animate: false});
this.navCtrl.push(ContactCreated, null, {animate: false});

【讨论】：

不错的解决方案，但它会通过后台页面，调用 ionViewWillEnter 等。在某些情况下是一个问题

【解决方案4】：

这样您将页面添加到堆栈顶部，然后从第二个位置移除实际页面，而不调用任何其他页面输入事件：

self.navCtrl.push(NextPage, nextParams).then(()=>{
    let index = self.viewCtrl.index;
    self.navCtrl.remove(index);
});

【讨论】：

【解决方案5】：

如果你想替换导航堆栈中的最后一页，你可以这样做：

navController.pop()
    .then(() => navController.push(ContactCreated))
    .catch(() => navController.push(ContactCreated));

【讨论】：