[英]Angular 10 lazy loading routing not working
我无法弄清楚为什么这种情况有效,而不是以下情况。
场景 1:这会为模块正确加载 CasesModule 组件。
NavigationEnd(id: 2, url: '/cases', urlAfterRedirects: '/cases/current')
app-routing.modules.ts:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
{
path: "cases",
loadChildren: () => import("./cases/cases.module").then(m => m.CasesModule)
},
{ path: "**", redirectTo: "", pathMatch: "full" }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
case.routing.modules:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { CurrentCasesComponent } from './current-cases/current-cases.component';
const routes: Routes = [
{ path: '', redirectTo: 'current', pathMatch: 'full' },
{
path: 'current',
component: CurrentCasesComponent,
},
];
@NgModule({
declarations: [],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class CasesRoutingModule {}
场景2:
我想动态加载模块路由,因为我使用 SystemJs 导入动态导入模块。
主要区别是: app-routing.modules.ts:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
// {
// path: "cases",
// loadChildren: () => import("./cases/cases.module").then(m => m.CasesModule)
// },
{ path: "**", redirectTo: "", pathMatch: "full" }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
我想用组件或服务加载路由。
app.component.ts
import { Component, VERSION } from "@angular/core";
import { Route, Router } from "@angular/router";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
constructor(private router: Router) {}
route() {
this.createRoute();
// test navigation
this.router.navigate(["cases"]);
}
createRoute() {
const appRoutes = [...this.router.config];
const route: Route = {
path: "cases",
loadChildren: () =>
import("./cases/cases.module").then(m => m.CasesModule)
};
appRoutes.push(route);
this.router.resetConfig(appRoutes);
}
}
应用程序组件.html
<button (click)="route()">cases</button>
<app-shell></app-shell>
我可以看到路由在路由器配置中正确加载,但是当我调用路由并重定向到默认页面时,它不会创建 _LoadedConfig。
NavigationEnd {id: 2, url: "/cases", urlAfterRedirects: "/"}
这是重现该问题的示例的链接: StackBlitz
我错过了什么?
在 createRoute() 函数中,您在 appRoutes 数组中推送一条新路由,而不是推送尝试 unshift()
appRoutes.unshift(route);
实际上问题是 push 在数组的末尾添加元素,并且您有一个必须在末尾的通配符路由。
unshift 将在数组的开头添加元素,希望这会有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.