Angular+Ionic路由跳转URL更新正常但页面无内容需手动刷新如何解决

解决方法如下： #

1. 确认路由配置正确性

首先检查根路由或对应特性模块的路由配置，确认/checkout/address路径正确绑定了目标页面组件，无路径拼写错误：

// app-routing.module.ts 或对应特性模块路由文件
const routes: Routes = [
  // 其他路由配置
  {
    path: 'checkout/address',
    component: AddressPageComponent // 确认此处绑定的是目标页面组件
  }
]

2. 调整跳转传参格式

NavController.navigateRoot 支持路由命令数组传参，可避免字符串URL解析异常，你可以直接用命令数组跳转，或者配合路由生成方法使用：

// 直接传命令数组
this.navCtrl.navigateRoot(['/checkout', 'address']);

3. 适配Ionic页面生命周期

Ionic默认开启路由复用策略缓存页面实例，原有ngOnInit只会在组件第一次创建时触发，跳转已缓存页面不会重新执行。你可以把页面初始化、数据加载逻辑放到ionViewWillEnter钩子中，该钩子每次页面进入时都会触发：

// 目标页面组件代码
import { IonViewWillEnter } from '@ionic/angular';

export class AddressPageComponent implements IonViewWillEnter {
  ionViewWillEnter() {
    // 原本放在ngOnInit中的初始化逻辑移到此处
  }
}

如果需要彻底关闭该页面的缓存，可以在路由配置中添加配置项：

{
  path: 'checkout/address',
  component: AddressPageComponent,
  data: {
    reuse: false
  }
}

4. 替换为Angular原生Router跳转

如果上述方案无效，可以使用Angular原生Router配合replaceUrl参数实现和navigateRoot一致的清空路由栈效果：

import { Router } from '@angular/router';

constructor(private router: Router) {}

// 跳转逻辑
this.router.navigate([this.routeService.generateUrl(APP_PATHS.checkOut.modules.address)], { replaceUrl: true });

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