如何通过延迟加载在模块之间共享组件答案

【问题标题】：How to share components between modules with lazy loading如何通过延迟加载在模块之间共享组件
【发布时间】：2017-08-22 05:45:41
【问题描述】：

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

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

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

我的加载延迟加载：

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

但出现以下错误：

【问题讨论】：

一些事情： 1. 你的第一个共享模块有 FormBrandComponent 作为提供者 - 我认为这是一个错字 - FormBrandComponent 应该在你的声明中，而不是你的提供者。 2. 在您的共享模块中，您需要导入共享模块的组件正在使用的任何模块（例如来自@angular/forms 的 FormsModule、CommonModule 等。 3. 组件只能在单个模块上声明 - 您正在声明您的 FormComponent 在两个不同的模块中 - shared 和 product....
我关于引入共享模块的观点是，您显然有一些代码在两个模块中都使用，因此从概念上讲，您尚未明确认识到的两个功能模块之间的功能重叠。所以，我是说将共享功能完全移至一个新模块，并让其他两个功能模块从那里使用该功能。换句话说，让您的文件夹结构也反映共享依赖关系而不是通过引用品牌模块的片段来创建共享模块可能是一个好主意

标签： angular lazy-loading

【解决方案1】：

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

您可以选择新模块是延迟加载还是急切加载 - 任何一个都可以。（由于它是产品和品牌模块的依赖项，一旦加载了任何一个，新模块也会被加载）。

【讨论】：

我应该创建一个共享模块，它将被其他两个模块导入，我在共享模块中放了什么？只有两个模块共有的表单组件？
您可以放置两个模块正在使用的任何组件/服务。在构建功能模块（您的产品和品牌模块看起来就是这样）时，功能应该是相对独立的。如果有一些东西（组件、指令、管道、服务）需要使用多个功能模块，这通常表明您可以从这两个模块中提取一些共享模块。所以我要说的不是隐式共享项目，而是通过创建一个包含共享内容的模块来使其明确
我明白了。你说的是：既然有共享的东西，那么为这些共享的东西构建一个模块是个好主意。而不是创建共享机制。是吗？
是的 - 这是基本的想法。
@snorkpete，如果我们在两个延迟加载的模块中都包含一个共享模块，这是否意味着共享模块将被编译到每个延迟加载的JS 文件中（在这种情况下都包含在内）？