我是angular的新手,我正在使用带有延迟负载路由的angular 6。我想在购买组件下面包含 order 组件。但是,当我在 purchase 模块中导入了订单模块时, order 组件模板已由自己替换了购买模板。
我认为默认路由path: ''
是有冲突的,因为它们两者都具有path: ''
的路由,但是我不知道如何解决。
这是代码:-
app.route.ts
...
...
const routes: Routes = [{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
}
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule],
providers: []
})
...
...
orders.route.ts
...
...
const OrderRoutes: Routes = [
{ path: '', component: OrderComponent },
{ path: 'type', component: OrderTypeComponent }
];
export const PurchaseRouting: ModuleWithProviders = RouterModule.forChild(OrderRoutes);
...
...
orders.module.ts
..
..
@NgModule({
imports: [
CommonModule
, FormsModule
, HttpModule
, RouterModule
, SharedModule
, ReactiveFormsModule
],
declarations: [OrderComponent],
exports:[OrderComponent],
providers: [ConfigurationService, GlobalVariables]
})
...
...
order.tpl.html
...
...
Order element
...
...
purchase.route.ts
...
..
const PurchaseRoutes: Routes = [
{ path: '', component: PurchaseComponent },
{ path: 'category', component: PurchaseCategoryComponent }
];
export const PurchaseRouting: ModuleWithProviders = RouterModule.forChild(PurchaseRoutes);
...
...
purchases.module.ts
...
...
@NgModule({
imports: [
CommonModule
, FormsModule
, HttpModule
, RouterModule
, SharedModule
, ReactiveFormsModule
,OrdersModule -->here i import OrdersModule and when i imported here purchase template will be remove and order template show. I think default routing is conflicted but i dont know how to fix it.
],
declarations: [PurchaseComponent],
providers: [ConfigurationService, GlobalVariables]
})
...
...
purchase.tpl.html
...
... // purchase html element stuff
...
<app-order></app-order> -->use something like this
...
...
...