时间戳

首页 > 解决方案 > 自定义指令在角度模块中不起作用？

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

问题描述

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

现在我创建了一个IconSpacerDirective与 .bind 绑定的自定义指令app.module.ts。它在我的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 { }

我怎样才能使用IconSpacerDirective我的内部identityRegistryModule

标签： angulartypescriptangular-directiveangular-module

解决方案

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

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

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

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

推荐阅读