Angualr2：组件不是已知元素吗？

Question

有一个名为“ card”的组件，并且在应用程序中使用很多，所以我决定在导入app.module的任何应用程序中将其保留为可用状态

尝试了两种方法：1-将card.component导入AppComponent之后的声明中。 2-我将卡转换成模块并导入了导入。

在任何情况下都不能解决问题，该错误仍然存​​在。 “卡不是已知元素”

Obs：在情况2中，是的，我将卡中的组件导出。 模组

代码...

情况1（声明）：

// app.module.ts
import { CardComponent } from './components/card/card.component'; 
@NgModule({
  declarations: [
    AppComponent,
    CardComponent
  ],

情况2（导入模块）：

// app.module.ts
import { CardModule } from './components/card/card.module';

imports: [
    BrowserModule,
    HttpClientModule,
    CardModule,

卡代码

// card.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'card',
  templateUrl: './card.component.html',
})
export class CardComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

// card.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CardComponent } from './card.component';

@NgModule({
  declarations: [CardComponent],
  imports: [ CommonModule ],
  exports: [CardComponent],
  providers: [],
})
export class CardModule {}

Answer 1

问题是，如果您试图在其他模块中使用此CardComponent或CardModule ，不仅是主AppModule ，还必须将其导入要使用它们的模块中。 我建议你插入CardComponent或导入CardModule成SharedModule将在所有的模块导入。

例：

首先，您创建CardModule声明CardComponent

@NgModule({
  declarations: [CardComponent]
})
export class CardModule {}

如果您还没有SharedModule ，那么最好创建一个SharedModule并使用它在整个应用程序的SharedModule导入/导出通用共享模块。

@NgModule({
  imports: [
    CommonModule,
    CardModule,
    ...
  ],
  exports: [
    CommonModule,
    CardModule,
    ...
  ]
})
export class SharedModule {}

然后，您可以将SharedModule导入到AppModule ，以便声明到其中的组件可以使用您在SharedModule共享的SharedModule 。

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

并将SharedModule导入任何其他功能模块将为您提供模块所需的所有基础知识。

@NgModule({
  imports: [SharedModule],
  ...
})
export class FeatureModule {}

请注意，如果要通过它提供任何Singleton服务， forRoot在forRoot中为SharedModule创建静态方法。 然后，当将SharedModule导入到AppModule ，可以调用.forRoot()导入。