无法绑定属性，因为它是按钮的未知属性

Question

我有一个问题，我有一个名为 CoreModule 的模块，它是在 AppModule 中导入的，我试图在某些子模块中使用这个模块，但是如果我在子模块中导入模块，它会给出这个当我转到该模块中的某个组件时出现错误CoreModule has already been loaded. Import Core modules in the AppModule only.。

如果我不在子模块中导入CoreModule，则会出现此错误：Can't bind to 'ngxHasAnyRole' since it isn't a known property of 'button'

我的AppModule 中的导入看起来像这样

 imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbDatepickerModule.forRoot(),
    NbDialogModule.forRoot(),
    NbWindowModule.forRoot(),
    NbToastrModule.forRoot(),
    CoreModule.forRoot(),
    ThemeModule.forRoot(),
    LoggerModule.forRoot({
      level: NgxLoggerLevel.INFO,
      enableSourceMaps: true
    }),
  ],

我的CoreModule 看起来像这样

...

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [
    NbAuthModule,
    HasRoleDirective,
    HasAnyRoleDirective,
  ],
  declarations: [HasAnyRoleDirective, HasRoleDirective],
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }

  static forRoot(): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      providers: [
        ...NB_CORE_PROVIDERS,
      ],
    };
  }

这是我尝试使用来自CoreModule的指令的html部分

        <button nbButton
                (click)="new()"
                [ngxHasAnyRole]="['ROLE_TEST', 'ROLE_ADMIN']"
                class="table-button"
                status="primary"
                size="small">
          NEW
          <nb-icon icon="plus-outline"></nb-icon>
        </button>

我不想在子模块中导入，因为这是在父模块中导入的。我该如何解决这个问题？

其他信息 当我在孩子中导入CoreModule 时执行ng serve，然后在ng serve 开启时将其删除。它有效，但如果我关闭并重新开始。它不会启动。

Answer 1

CoreModule 应该用于只能导入一次的内容。这些通常是从应用范围内的服务导入的。 CoreModule 中绝对不应该包含组件、指令和管道。

这些内容应该放在SharedModule 中。

Angular 声明了几个 NgModule 类别，您可以将其用作指南：

• Domain：域 NgModule 围绕功能、业务域或用户体验进行组织。
• Routed：NgModule 的顶部组件充当路由器导航路由的目的地。
• Routing：一个路由 NgModule 为另一个 NgModule 提供路由配置。
• Service：服务 NgModule 提供实用服务，例如数据访问和消息传递。
• Widget：小部件 NgModule 使组件、指令或管道可用于其他 NgModule。
• Shared：共享的 NgModule 使一组组件、指令和管道可用于其他 NgModule。

我的建议是认真阅读angular.io 上提供的优秀文档/指南

那你该怎么办？从CoreModule 中删除HasAnyRoleDirective 和HasRoleDirective 的导出和声明，并将它们放在SharedModule 中或创建一个小模块RoleModule，并仅在必要时导入它。由你决定