ionic4 achieve ionic3 NavController.removeView () results

First, the requirement description

When do when using ionic4 development encountered such a demand, the user can enter an order page from the shopping cart page, then enter the payment page from the order page, but when the user clicks the back button in the mobile phone payment page directly back to the shopping cart page (jump orders submitted through the page).

Second, the problems encountered

Under normal circumstances, ionic and return to the page display is a process of pushing and popping when opening a new page, the new page will be push to the page stack, when you click the Back button, this page top of the stack out of the stack.

In ionic3, there is provided a NavController.RemoveViewmethod to realize the required function, the following code can be realized.

    //记录当前页面对象
    let actionView = viewService.getActive();
    //打开新页面
    await viewService.Push(page, context, { animate: false });
    //从页面栈中删除记录页面
    await viewService.RemoveView(actionView);

In ionic4 in NavControllerapi has undergone great changes, removed RemoveViewmethod only provides navigateForward、back、popother simple api.

Third, the solution

ionic4It recommended angularown routing policy, namely the use of Routerrouting. In use router.navigateByUrl()when the method jump page, you need to configure replaceUrlthe property value true, the newly opened page will replace the current page.

    this.router.navigateByUrl('order/order-pay', { replaceUrl: true });

Html final structure as shown. From the html structure, order submission page is replaced with the order payment page, click the Back button to return to the shopping cart page.