自定义指令在角度模块中不起作用？

Question

在我的应用程序中，我有两个模块。 IdentityModule and ServiceModule。它们作为延迟加载技术加载。

现在我创建了一个与app.module.ts 绑定的自定义指令IconSpacerDirective。它在我的app.component.ts 中运行良好。

但它在 IdentityModule 中不起作用。我有这个错误：

ERROR Error: Uncaught (in promise): Error: Type IconSpacerDirective is part of the declarations of 2 modules: AppModule and IdentityRegistryModule! Please consider moving IconSpacerDirective to a higher module that imports AppModule and IdentityRegistryModule. You can also create a new NgModule that exports and includes IconSpacerDirective then import that NgModule in AppModule and IdentityRegistryModule.
Error: Type IconSpacerDirective is part of the declarations of 2 modules: AppModule and IdentityRegistryModule! Please consider moving IconSpacerDirective to a higher module that imports AppModule and IdentityRegistryModule. You can also create a new NgModule that exports and includes IconSpacerDirective then import that NgModule in AppModule and IdentityRegistryModule.

这是我的identityRegistryModule：

import { IconSpacerDirective } from '../shared/custom-directive/icon-spacer.directive';
@NgModule({
  declarations: [
    IconSpacerDirective
  ],
  imports: [
    IdentityRegistryRoutingModule,
    MaterialModule   

  ],
  providers: [
    IdentityService,
  ],
})
export class IdentityRegistryModule { }

我的app.module.ts如下：

import { IconSpacerDirective } from './shared/custom-directive/icon-spacer.directive';

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    SideNavComponent,
    HeaderComponent,
    HomeComponent,
    IconSpacerDirective,

  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    LayoutModule,
    MaterialModule,
    OAuthModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
  //exports: [IconSpacerDirective]
})
export class AppModule { }

如何在我的identityRegistryModule 中使用IconSpacerDirective

Answer 1

如果您只想在 IdentityModule 中使用该指令，则无需在 App.module 中添加它。在 Identity 模块中声明并使用它。但是，如果您想在多个模块中使用该指令，包括 app.module 中的组件，则为常见指令创建单独的模块，例如：

通用指令模块

@NgModule({
 declarations: [IconSpacerDirective],
 exports:[IconSpacerDirective]
})
export class MyCommonModule{}

然后将其导出到您想要的任何位置。假设您想将它用于 app.module 中的组件以及 Identity 模块中的组件，请遵循以下逻辑：

app.module.ts

@NgModule({
imports: [MyCommonModule]
})

identiyt.module.ts

从 '../shared/custom-directive/icon-spacer.directive' 导入 { IconSpacerDirective }；

@NgModule({
  imports: [
    IdentityRegistryRoutingModule,
    MaterialModule,
    **MyCommonModule**
  ],
  providers: [
    IdentityService,
  ],
})
export class IdentityRegistryModule { }

Answer 2

由于您正在导入模块，因此您无需再次显式声明它。将其从 IdentityRegistryModule 的声明中删除，因为这是错误明确说明的内容。

在app.module中，导出IconSpacerDirective

@NgModule({
  ...
  exports: [IconSpacerDirective] // so that it can be used when this module is imported
})
export class AppModule { }

并在identityRegistryModule中导入app.module

@NgModule({
  imports: [
    IdentityRegistryRoutingModule,
    MaterialModule,
    AppModule  
  ]
  ...
})
export class IdentityRegistryModule { }

Answer 3

如果您想在AppModule 和IdentityRegistryModule 中都使用IconSpacerDirective，那么您需要为该指令创建一个单独的模块，然后您可以将它导入到您需要的模块中。

@NgModule({
  declarations: [IconSpacerDirective],
  exports: [IconSpacerDirective]
})
export class IconSpacerModule { }

@NgModule({
  imports: [IconSpacerModule]
})
export class AppModule { }

@NgModule({
  imports: [IconSpacerModule]
})
export class IdentityRegistryModule { }