Ionic 4中用Angular Router实现类似NavController的导航控制

嗨，我刚好在Ionic 4项目里处理过一模一样的需求！其实Angular Router完全能实现和NavController的setRoot、push对应的效果，核心是通过控制路由历史栈来实现返回按钮的显示与否，咱们分两种情况说：

1. 导航后无返回按钮（对应NavController.setRoot） #

setRoot的本质是把当前页面设为路由栈的根页面，清空之前的历史记录，这样Ionic的导航栏就不会出现返回按钮。用Angular Router的话，只需要在跳转时加上replaceUrl: true配置即可：

// 方式一：用navigateByUrl
this.router.navigateByUrl('/login', { replaceUrl: true });

// 方式二：用navigate数组形式
this.router.navigate(['/login'], { replaceUrl: true });

加上这个配置后，新页面会替换掉当前的路由栈顶部，同时清空之前的历史，相当于把它设为了根页面，左上角自然就不会有返回按钮了。

2. 导航后保留返回按钮（对应NavController.push） #

这个就和你现在用的普通跳转一样，不需要额外配置，直接调用跳转方法就行，新页面会被添加到路由栈的顶部，Ionic会自动识别路由栈里有上一页，从而显示返回按钮：

// 普通跳转，保留返回按钮
this.router.navigateByUrl('/login');
// 或者
this.router.navigate(['/login']);

额外补充：手动控制返回按钮显示 #

如果有时候你需要更灵活的控制（比如某些特殊场景下，即使路由栈有历史也想隐藏返回按钮），可以直接在页面的ion-toolbar里通过*ngIf控制ion-back-button的显示：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <!-- 根据组件内的变量控制显示 -->
      <ion-back-button *ngIf="shouldShowBackButton"></ion-back-button>
    </ion-buttons>
    <ion-title>页面标题</ion-title>
  </ion-toolbar>
</ion-header>

然后在组件类里定义shouldShowBackButton变量，根据业务逻辑设置true或false就行。

内容的提问来源于stack exchange，提问作者Nika Kurashvili