如果 '<selector>' 是一个 Angular 组件，那么验证它是这个模块的一部分

Question

我是 Angular2 的新手。我试图创建一个组件但显示错误。

这是 app.component.ts 文件。

 import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

这是我要创建的组件。

 import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

显示两个错误：

1. 如果 my-component 是一个 Angular 组件，那么验证它是这个模块的一部分。
2. 如果 my-component 是 Web 组件，则将 CUSTOM_ELEMENTS_SCHEMA 添加到该组件的 @NgModule.schemas 以禁止显示此消息。

请帮忙。

原文由 Vimal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 MyComponentComponent 应该在 MyComponentModule 中。

在 MyComponentModule 中，您应该将 MyComponentComponent 放在“导出”中。

像这样的东西，见下面的代码。

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

export class MyComponentModule {
}

并将 MyComponentModule 放入 imports 中 app.module.ts 像这样（参见下面的代码）。

 import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

这样做之后，您的组件的选择器现在可以被应用程序识别。

您可以在这里了解更多信息： https ://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

干杯!

原文由 Cyan Baltazar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

除了 app.module 之外，我还有不同的模块，例如 hom-page.mdule

我忘了 在声明部分将 Home-page.component 添加到 Home-page.module

原文由 Mehrshad Farzaneh 发布，翻译遵循 CC BY-SA 4.0 许可协议