Question

我有这个流程：

联系人页面 - ＆gt; navController.push（NewContact） - ＆gt; navController.push（ContactCreated）

如何在ContactCreated页面上显示＆＃34;返回＆＃34;按钮将用户返回到root＆＃34; Contacts＆＃34;页面而不是NewContact页面？所以我想替换导航堆栈中的页面。

我正在使用Ionic 3。

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

Answer 2

只需使用popToRoot() function代替pop()。

this.navCtrl.popToRoot ();

Answer 3

pop紧跟push后禁用动画：

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

Answer 4

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

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

Answer 5

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

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

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

5 个答案: