angular - 如果 '' 是一个 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 中以抑制此消息。

请帮助。

Answer 1

您的 MyComponentComponent 应该在 MyComponentModule 中。

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

类似这样的东西，请看下面的代码。

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

export class MyComponentModule {
}

并将 MyComponentModule 放入 app.module.ts 的 imports 中，如下所示(参见下面的代码)。

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