时间戳

首页 > 解决方案 > 在 loadchildren 路径中导航不起作用

angular - 在 loadchildren 路径中导航不起作用

问题描述

我有一个非常简单的项目设置，但是我导航到带有 loadchildren 的延迟加载路径不起作用......

应用程序路由.module.ts：

const routes: Routes= [
    {path:'', redirectTo: 'auth', pathMatch: 'full'},
    {path:'auth', component: AnmeldungComponent},
    {path:'system', loadChildren: '~/app/system/system.module#SystemModule'},
    {path:'settings', component: SettingsComponent}
];

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

系统路由.module.ts：

const routes: Routes = [
    {
        path: "",
        component: ListeSystemComponent,

    },
    { path: "monitorliste", component: ListeMonitorComponent },
    { path: "messwerte/:id", component: DatenMonitordatenComponent },
    {
        path:
            "messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id",
        component: MesswertverlaufComponent,
    },

];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule],
})
export class SystemRoutingModule {}

列表-monitor.component.ts：

onItemTap(currentMonitorListeElem: MonitorListeElem){
    this.routerExt.navigate(['messwerte',currentMonitorListeElem.id ], {transition: {name: 'slideLeft'}, relativeTo: this.route});
}

执行onItemTap函数时出现错误：
错误：无法匹配任何路由。URL 段：'system/monitorliste/messwerte/421'

这不是完全正确的路线还是我完全理解错了？

非常感谢！

编辑：编辑系统-routing.module.ts：

const routes: Routes = [
    {
        path: "",
        component: ListeSystemComponent,
        children: [
            {
                path: "monitorliste",
                component: ListeMonitorComponent,
                children: [
                    {
                        path: "messwerte/:id",
                        component: DatenMonitordatenComponent,
                    },
                    {
                        path:
                            "messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id",
                        component: MesswertverlaufComponent,
                    },
                ],
            },
        ],
    },
];

当我这样使用它时，我什至无法到达“monitorliste”并且我被困在“系统”中

使用时：
system-routing.module.ts：

const routes: Routes = [
    {
        path: "",
        component: ListeSystemComponent,

    },
    {
        path: "monitorliste",
        component: ListeMonitorComponent,
        children: [
            {
                path: "messwerte/:id",
                component: DatenMonitordatenComponent,
            },
            {
                path:
                    "messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id",
                component: MesswertverlaufComponent,
            },
        ],
    },
];

我可以到达“monitorliste”，但我无法到达“messwerte/:id”，而是被重定向到“monitorliste”

标签： angularangular-ui-routernativescriptlazy-loading

解决方案

原因是“messwerte/:id”不是“monitorliste”的子级，并且您会收到错误“无法匹配任何路由”。

{
  path: "monitorliste",
  component: ListeMonitorComponent,
  children: [{ path: "messwerte/:id", component: DatenMonitordatenComponent }]
},

另请注意，可以使用延迟加载的新方法，例如

loadChildren: () => import('./crm/crm.module').then(m => m.CrmModule)

推荐阅读