如何在延迟加载的模块之间共享组件

时间:2017-03-28 23:24:20

标签: angular lazy-loading

我正在加载延迟加载我的模块。我需要在另一个模块中使用一种形式的模块。

例如,有产品模块和品牌模块。两者都以延迟加载方式加载。但我希望用户能够在产品表单中注册品牌。但我的问题是两个模块都是懒散加载的。

我真的需要完全加载这两个模块吗?或者我可以只加载所需的组件吗?

我的加载延迟加载:

const productRoutes: Routes = [
  {
    path: 'product',
    loadChildren: 'app/admin/product/product.module#ProductModule',
    canLoad: [AuthGuard]
  }
];

const brandRoutes: Routes = [
  {
    path: 'brand',
    loadChildren: 'app/admin/brand/brand.module#BrandModule',
    canLoad: [AuthGuard]
  }
];

我的组件:

....

<div class="form-group">
    <label for="exemplo">Create Name Product</label>
    <input type="text" name="name" [(ngModel)]="Product.name" #name="ngModel" >
</div>

<div class="form-group">
    <label for="exemplo">Create Brand</label>
    <brand-form-component></brand-form-component>
</div>

修改

我创建了共享模块:

import { NgModule }            from '@angular/core';

import { FormComponent as 
    FormBrandComponent }      from '../../brand/brand-form/form.component'

@NgModule({
  imports:      [  ],
  declarations: [ FormBrandComponent ],
  providers:    [ FormBrandComponent ],
  exports:      [ FormBrandComponent ],
})
export class SharedModule { }

我在其他模块中导入:

品牌模块

import { SharedModule }from '../shared/shared.module';

@NgModule({
  imports: [ SharedModule, DialogModule, GrowlModule, Ng2PaginationModule, BrandRouting ],
  declarations: [ BrandComponent, ListComponent ],
  providers:[ BrandService ]
})
export class BrandModule {}

产品模块

import { SharedModule }from './shared/shared.module';


@NgModule({
  imports: [ SharedModule, CurrencyMaskModule, DragulaModule, GrowlModule, DialogModule, Ng2PaginationModule, productRouting, ReactiveFormsModule ],
  declarations: [ ProductComponent, FormComponent, ListComponent ],
  providers:[ FormComponent, ProductService, BreadService, MarcaService, GradeService ]
})
export class ProductModule { }

但是给出了以下错误:

enter image description here

1 个答案:

答案 0 :(得分:8)

延迟加载的当前实现是在模块级别上,它是全部或全部。如果您需要在两者之间共享组件(这听起来像这样),那么您可能有一个尚未完全识别的隐藏共享模块。因此,您很可能应该创建一个新模块来容纳这些共享组件/服务,并将该模块导入到其他两个延迟加载的模块中。

您可以选择新模块是懒惰还是急切加载 - 这两种模块都可以正常工作。 (由于它是产品和品牌模块的依赖关系,一旦加载,新模块也会被加载)。