Question

有一个名为＆＃34; card＆＃34;在应用程序中使用很多，所以我决定在任何导入 app.module

的应用程序中保留它

以两种方式尝试： 1 - 将 card.component 导入AppComponent之后的声明中。 2-I将卡转换为模块并导入导入。

在所有案例中都没有解决问题，错误仍然存在。＆＃34;卡不是已知元素＆＃34;

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，那么最好创建一个并使用它在整个应用程序中导入/导出公共共享模块。

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

然后，您可以将SharedModule导入AppModule，这样您在其中声明的组件就可以使用您在SharedModule中分享的所有内容。

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

将SharedModule导入任何其他功能模块将为您提供模块所需的所有基本输入。

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

请注意，如果您想通过它提供任何forRoot服务，则应在SharedModule中创建静态方法Singleton。然后，在将SharedModule导入您的AppModule时，您可以将其导入.forRoot()。

Angualr2：组件不是已知元素？

1 个答案: