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: '' 应用程序路由模块

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 {}

对布局路由模块

同样适用

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 {}

最后组件模块

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

不要忘记添加<router-outlet></router-outlet>

请参见Sample on Stackblitz

角度-延迟加载实现后更改了路由网址

1 个答案: