NativeScript懒加载子路由失效问题排查与咨询

一、解决子路由无法正常跳转的问题 #

先从最容易忽略的点开始排查，再逐步修正跳转逻辑：

1. 必须给父组件添加路由出口
   子路由的组件需要在父组件的<page-router-outlet>中渲染，这是NativeScript子路由生效的核心前提。打开ListeSystemComponent的模板文件（比如liste-system.component.html），添加这个容器：

   <!-- 父组件的原有内容 -->
   <page-router-outlet></page-router-outlet>
   

   如果没加这个，子路由组件无处渲染，就会出现"卡住"或者路径找不到的假象。

2. 修正路由跳转的代码逻辑

   • 如果你是在ListeSystemComponent内部跳转（比如点击按钮跳转到监视器列表），相对路径的写法要确保ActivatedRoute实例正确：

     import { ActivatedRoute, Router } from "@angular/router";
     
     constructor(private router: Router, private route: ActivatedRoute) {}
     
     goToMonitorList() {
       this.router.navigate(['monitorliste'], {
         transition: { name: 'slideLeft' },
         relativeTo: this.route
       });
     }
     

     这里的this.route必须是当前父组件的激活路由实例，不能错用其他组件的路由对象。
   • 如果是从外部组件（比如登录页）跳转到这个子路由，直接用绝对路径更稳妥：

     this.router.navigate(['/system/monitorliste'], { transition: { name: 'slideLeft' } });
     

3. 你的路由配置是正确的
   目前system-routing.module.ts里的父路径""对应/system，子路径monitorliste对应/system/monitorliste，这个映射关系没问题，不需要调整。

二、懒加载的最佳实践建议 #

懒加载的核心是按需加载，减少初始包体积，要不要拆分取决于代码量和使用频率：

• 如果监视器相关的组件（ListeMonitorComponent、DatenMonitordatenComponent等）代码量较大，且用户并非每次进入/system都会用到这些功能，那么把监视器部分拆成独立模块并懒加载更合理。比如可以抽一个MonitorModule，然后修改system-routing.module.ts：

  const routes: Routes = [
    {
      path: "",
      component: ListeSystemComponent,
      children: [
        { 
          path: "monitorliste", 
          loadChildren: './monitor/monitor.module#MonitorModule' 
        },
        // 同理，如果"messwerte""messwertverlauf"的代码量也大，也可以分别拆成懒加载模块
      ],
    },
  ];
  

• 如果监视器相关组件代码量很小，懒加载带来的性能提升微乎其微，反而增加了模块拆分的复杂度，那直接保持当前的子路由配置就好，没必要多此一举。
• 另外你当前对SystemModule的懒加载是非常合理的——用户可能先停留在登录页，不需要立即加载系统模块的代码，能有效提升App的启动速度。

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