Question

我想在多个模块中重用指令。我无法在parentmodule中声明该指令，因为所有子模块都是通过延迟加载来加载的。如果我在两个子模块中声明相同的指令，我会收到错误：

错误错误：未捕获（在承诺中）：错误：类型AddDirective是部分 2个模块的声明：SharedModule和GdprModule！请考虑将AddDirective移动到更高的导入模块 SharedModule和GdprModule。您还可以创建一个新的NgModule 导出并包含AddDirective然后导入NgModule SharedModule和GdprModule。

AddDirective是一个简单的指令，为我提供动态组件所需的ViewContainerRef。我按照以下教程添加它们：

https://angular.io/guide/dynamic-component-loader

我是否必须为每个惰性模块创建自己的指令，或者有没有办法通过共享模块提供相同的指令？

SharedModule：

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
     AddDirective
  ]
})

LazyModule：

import { SharedModule } from './pathToShared/sharaed.module';

@NgModule({
 imports: [ SharedModule ],
 declarations: [ LazyComponent],
 entryComponents: [ DynamicalComponent ]
})
export class LazyModule { }

Answer 1

您可以创建共享模块。添加多次使用的模块并导出它们。例如

shared.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AlertModule, TimepickerModule } from 'ngx-bootstrap';

import { SweetAlertService } from './../sweetalert2.service';

import { UnmaskDirective } from '../../directive/unmask.directive';
import { FileUploadComponent } from '../file-upload/file-upload.component';

@NgModule({
   imports: [
   CommonModule, NgbModule.forRoot(), AlertModule.forRoot(),TimepickerModule.forRoot(), FileUploadModule
  ],
  declarations: [UnmaskDirective, FileUploadComponent],
  providers: [SweetAlertService],
  exports: [
    NgbModule, AlertModule, TimepickerModule, UnmaskDirective, FileUploadComponent, FileUploadModule
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SweetAlertService]
    }
  }
}

现在可以在需要时导入共享模块例如 register.module.ts

import { SharedModule } from './../../common/sharaed/sharaed.module';

@NgModule({
 imports: [ SharedModule ],
 declarations: [ UserComponent],
 entryComponents: []
})
export class RegisterModule { }

现在注册模块包含共享模块中包含的所有模块

您还可以参考此链接shared.module.ts，angular real world example shared module，angular-modules-feature-modules

Answer 2

创建一个共享模块并在其中添加指令并在app.module.ts中导入共享模块

Angular 2/5在惰性模块

2 个答案: