如何通过延迟加载在模块之间共享组件 [英] How to share components between modules with lazy loading

问题描述

我正在用延迟加载来加载我的模块.我处于一种情况，需要在另一模块中使用一种形式的模块.

I'm loading my modules with lazy load. I'm in a situation where I need to use one form of a module in another module.

例如，有产品模块和品牌模块.两者均以延迟加载方式加载.但是我想让用户可以在产品表格中注册品牌.但是我的问题是，这两个模块都是延迟加载的.

For example, there is the product module and the brand module. Both are loaded in lazy load. But I wanted to make it possible for the user to register the brands within the product form. But my question is that both modules are loaded lazily.

我真的需要完全加载两个模块吗?还是只加载所需的组件?

Do I really need to fully load the two modules? Or could I just load only the required component?

我的加载延迟加载:

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

然后我导入了其他模块:

And I imported in the other modules:

品牌模块

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

但是出现以下错误:

推荐答案

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

The current implementation of lazy loading is on the module level, and it's all or nothing. If you need to share components between the two (which is what this sounds like), then it's possible you have a hidden shared module that you haven't yet completely identified. So, it's quite possible that you should be creating a new module to house those shared components/services and having that module be imported into the other two lazy loaded modules.

由您选择是将新模块延迟还是紧急加载-两者都可以使用. (由于它既是产品模块又是品牌模块的依存关系，因此一旦加载，新模块也将被加载.)

It is your choice whether that new module would be lazy or eagerly loaded - either would work. (Since it is a dependency of both the product and brand modules, once either is loaded, the new module would also get loaded).

这篇关于如何通过延迟加载在模块之间共享组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！