Ionic 4中ion-router-outlet失效：路由已推送但页面无响应、链接不可点击

我仔细排查了你的代码，发现几个关键问题，这些应该就是导致路由失效、链接不可点击的核心原因，一步步来修正：

1. 子页面中多余的<ion-app>和重复的ion-router-outlet #

整个Ionic应用只能有一个<ion-app>根组件，它已经在app.component.html里作为应用入口存在。你的detail.page.html作为子页面，不需要也不能再包含<ion-app>标签；同时额外的ion-router-outlet会干扰主路由出口的工作，完全没必要保留。

修正后的detail.page.html代码：

<ion-content padding>
  <div *ngIf="invoiceDetailData$ | async as invoiceDetailData">
    <div *ngFor="let item of invoiceDetailData?.invoiceDetail?.items">
      <ion-label *ngFor="let child of item.children">
        {{child.cardName}} {{child.availableBalance}} {{child.cardNumber}}
      </ion-label>
    </div>
  </div>
  <div>
    <ion-button *ngFor="let pages of detailPages" [routerLink]="[pages.url]">
      {{pages.title}}
    </ion-button>
  </div>
</ion-content>

2. 按钮的路由绑定问题 #

你原来用普通<button>+<span>绑定routerLink，可能存在事件触发的兼容性问题。换成Ionic官方的<ion-button>直接绑定routerLink，不仅符合Ionic的组件规范，也能确保路由事件正常触发。

3. 确认路由配置的正确性 #

检查你的app-routing.module.ts，确保appPages和detailPages中用到的所有路由地址都已经正确注册。示例配置如下：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  // 示例：注册你的页面路由
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
  { path: 'invoice-detail', loadChildren: () => import('./invoice-detail/invoice-detail.module').then(m => m.InvoiceDetailPageModule) },
  // 确保detailPages里的url都在这里有对应配置
  { path: 'another-page', loadChildren: () => import('./another-page/another-page.module').then(m => m.AnotherPagePageModule) },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最后一步 #

修改完成后，重启你的Ionic应用（执行ionic serve重启），应该就能解决路由无响应、链接不可点击的问题了。

内容的提问来源于stack exchange，提问作者Madi Zhanabek