angular

Question

我正在开发一个 Angular 10 应用程序。我有两种不同的 HTML 布局，因此我为此创建了两个组件 - layout1 和 layout2。我有四个组件 - component1、component2、component3、component4.

component1 & component2 使用 layout1

component3 & component4 使用 layout2

所以在实现延迟加载之前，我的路由 URL 看起来像下面这样

http://localhost:4200/#/component1

http://localhost:4200/#/component2

http://localhost:4200/#/component3

http://localhost:4200/#/component4

实现延迟加载后，我的路由是这样的-

http://localhost:4200/#/layout1/component1

http://localhost:4200/#/layout1/component2

http://localhost:4200/#/layout2/component3

http://localhost:4200/#/layout2/component4

下面给出了我的 app.routing.ts 的粗略草图

    export const AppRoutes: Routes = [
        {
          path: '',
          redirectTo: 'layout1',
          pathMatch: 'full',
        }, 
        {
          path: 'layout1',
          component: Layout1Component,
          children: [
            //to load layout 1 template
            {
              path: '',
              loadChildren: () => import("./layouts/layout1.module").then((m) => m.Layout1Module)
            },
            //to load component1 inside layout1 template
            {
                path: 'component1',
                loadChildren: () => import("./components/component1.module").then((m) => m.Component1Module)
            },
            //to load component2 inside layout1 template
            {
                path: 'component2',
                loadChildren: () => import("./components/component2.module").then((m) => m.Component2Module)
            }
        ]
        },
        {
          path: 'layout2',
          component: Layout2Component,
          children: [
            //to load layout 2 template
            {
              path: '',
              loadChildren: () => import("./layouts/layout2.module").then((m) => m.Layout2Module)
            },
            //to load component3 inside layout2 template
            {
                path: 'component3',
                loadChildren: () => import("./components/component3.module").then((m) => m.Component3Module)
            },
            //to load component4 inside layout2 template
            {
                path: 'component4',
                loadChildren: () => import("./components/component4.module").then((m) => m.Component4Module)
            }
        ]
        },
        {
          path: '**',
          redirectTo: 'layout1'
        }
      ];

我希望 URL 的外观和工作方式与实施延迟加载之前一样有没有办法实现我正在寻找的结果？谢谢！

Answer 1

考虑以下方法

具有表单中的文件夹结构

现在我们需要延迟加载组件。我们只需使用 path: '' app-routing-module

const routes: Routes = [
  {
    path: "",
    loadChildren: () =>
      import("./layout-1/layout-1.module").then(m => m.Layout1Module)
  },
  {
    path: "",
    loadChildren: () =>
      import("./layout-2/layout-2.module").then(m => m.Layout2Module)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

同样适用于 layout-routing 模块

const routes = [
  {
    path: "",
    component: Layout1Component,
    children: [
      {
        path: "component1",

        loadChildren: () =>
          import("./component-1/component-1.module").then(
            m => m.Component1Module
          )
      },
      {
        path: "component2",
        loadChildren: () =>
          import("./component-2/component-2.module").then(
            m => m.Component2Module
          )
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Layout1RoutingModule {}

最后component-module

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: "",
        component: Component1Component
      }
    ])
  ],
  declarations: [Component1Component]
})
export class Component1Module {}

别忘了添加 <router-outlet></router-outlet>

见Sample on Stackblitz

angular - 延迟加载实现后路由 url 改变

angular - routing url changed after lazy loading implementation

lazy-loading