从模块导出的角度组件无法在另一个模块中使用 [英] Angular exported component from module not useable in another module

问题描述

我正在AppModule中导出自定义组件，但是不能在要导入AppModule的另一个模块中使用它.我以为导出的组件在全球范围内可见?

I am exporting a custom component in my AppModule but can not use it in another module, which is being imported in the AppModule. I thought exported components are visible globally?

我正在尝试在TestModule的组件中将CalendarComponent与选择器"app-calendar"一起使用.

I am trying to use the CalendarComponent with the selector 'app-calendar' in a component within the TestModule.

app.module.ts

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

test.module.ts

test.module.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
})

test.component.html

test.component.html

<app-calendar></app-calendar>

控制台抛出"app-calendar"不是已知元素(不是模块的一部分)的错误

Console throws the error that 'app-calendar' is not a known element (not part of the module)

我想念什么?

推荐答案

创建CalendarModule或将Calendar组件添加到共享模块(取决于您的体系结构)，例如:

Create CalendarModule or add Calendar component to your share module(depends on your architecture) like:

calendar.module.ts

@NgModule({
  declarations: [CalendarComponent],
  exports: [CalendarComponent]
})
export class CalendarModule {}

在AppModule中，如果某些声明使用CalendarComponent

In AppModule remove CalendarComponent everywhere and import CalendarModule(or SharedModule) if some of declarations uses CalendarComponent

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,  <== remove it
  ],
  imports: [
    TestModule,
    // import CalendarModule here if any of declarations above use CalendarComponent in their template
  ],
  exports: [ ...
    CalendarComponent,  // remove it
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

test.module.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ 
    CalendarModule <=== add this, so TestComponent will be able to use CalenderComponent in its template
  ]
})
export class TestModule {}

有关更多详细信息，请参见

For more details see

• Angular 2使用另一个模块中的组件

这篇关于从模块导出的角度组件无法在另一个模块中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！