如何将组件转换为其他组件?

时间:2018-08-27 11:37:56

标签: angular typescript angular2-template angular-routing

我是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
...
...
...

0 个答案:

没有答案