來自模塊的Angular導出組件在另一個模塊中不可用

Question

我正在我的AppModule中導出自定義組件，但不能在另一個模塊中使用它，該模塊正在AppModule中導入。 我以為導出的組件在全球可見？

我試圖在TestModule中的組件中使用帶有選擇器'app-calendar'的CalendarComponent。

app.module.ts

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

test.module.ts

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

test.component.html

<app-calendar></app-calendar>

控制台拋出'app-calendar'不是已知元素（不是模塊的一部分）的錯誤

我錯過了什么？

Answer 1

創建CalendarModule或將Calendar組件添加到共享模塊（取決於您的體系結構），如：

calendar.module.ts

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

在AppModule中，在任何地方刪除CalendarComponent並導入CalendarModule （或SharedModule），如果某些聲明使用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 {}

有關詳細信息，請參閱

• Angular 2使用另一個模塊中的組件