Angular 角度-延迟加载实现后路由url已更改

我正在开发一个角度10应用程序。 我有两个不同的HTML布局，所以我为它创建了两个组件-

layout1

&

layout2

。 我有四个组件-

组件1

，

组件2

，

组件3

，

组件4

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

的大致外观

导出常数批准：路由=[
{
路径：“”，
重定向到：“布局1”，
路径匹配：“已满”，
}, 
{
路径：“布局1”，
组件：布局1组件，
儿童：[
//加载布局1模板的步骤
{
路径：“”，
loadChildren:（）=>import（“./layouts/layout1.module”）。然后（（m）=>m.layout1模块）
},
//在布局1模板中加载组件1
{
路径：“组件1”，
loadChildren:（）=>import（“./components/component1.module”）。然后（（m）=>m.Component1Module）
},
//在布局1模板中加载组件2
{
路径：“组件2”，
loadChildren:（）=>import（“./components/component2.module”）。然后（（m）=>m.component2模块）
}
]
},
{
路径：“布局2”，
组件：布局2组件，
儿童：[
//加载布局2模板的步骤
{
路径：“”，
loadChildren:（）=>import（“./layouts/layout2.module”）。然后（（m）=>m.Layout2Module）
},
//在布局2模板中加载组件3
{
路径：“组件3”，
loadChildren:（）=>import（“./components/component3.module”）。然后（（m）=>m.Component3Module）
},
//在layout2模板中加载组件4
{
路径：“组件4”，
loadChildren:（）=>import（“./components/component4.module”）。然后（（m）=>m.Component4Module）
}
]
},
{
路径：'**'，
重定向到：“布局1”
}
];

我希望URL的外观和工作方式与我实现延迟加载之前相同

---

有没有办法达到我想要的结果？谢谢

考虑下面的方法

在表单中具有文件夹结构

现在我们需要延迟加载组件。我们只需使用路径：' 应用程序路由模块

const routes:routes=[
{
路径：“”，
加载子项：（）=>
导入（“./layout-1/layout-1.module”）。然后（m=>m.layout1模块）
},
{
路径：“”，
加载子项：（）=>
导入（“./layout-2/layout-2.module”）。然后（m=>m.Layout2Module）
}
];
@NGD模块({
导入：[RouterModule.forRoot（路由）]，
导出：[路由模块]
})
导出类AppRoutingModule{}

这同样适用于布局布线模块

const路由=[
{
路径：“”，
组件：布局1组件，
儿童：[
{
路径：“组件1”，
加载子项：（）=>
导入（“./component-1/component-1.module”）。然后(
m=>m.Component1模块
)
},
{
路径：“组件2”，
加载子项：（）=>
导入（“./component-2/component-2.module”）。然后(
m=>m.Component2模块
)
}
]
}
];
@NGD模块({
导入：[RouterModule.forChild（路由）]，
导出：[路由模块]
})
导出类Layout1路由模块{}

最后组件模块

@NgModule({
进口：[
公共模块，
RouterModule.forChild([
{
路径：“”，
组件：组件1组件
}
])
],
声明：[组件1组件]
})
导出类组件1模块{}

别忘了添加

看