如果为'< selector>'是Angular组件，然后验证它是否属于此模块

问题描述

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

I am new in Angular2. I have tried to create a component but showing an error.

这是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中以禁止显示此消息.

1. If my-component is an Angular component, then verify that it is part of this module.
2. If my-component is a Web Component then add CUSTOM_ELEMENTS_SCHEMA to the @NgModule.schemas of this component to suppress this message.

请帮助.

推荐答案

您的MyComponentComponent应该在MyComponentModule中.

在MyComponentModule中，应将MyComponentComponent放置在出口"中.

And in MyComponentModule, you should place the MyComponentComponent inside the "exports".

类似的东西，请参见下面的代码.

Something like this, see code below.

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

export class MyComponentModule {
}

像这样将MyComponentModule放在app.module.ts中的imports中(请参见下面的代码).

and place the MyComponentModule in the imports in app.module.ts like this (see code below).

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

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

export class AppModule {}

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

After doing so, the selector of your component can now be recognized by the app.

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

You can learn more about it here: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

干杯！

这篇关于如果为'< selector>'是Angular组件，然后验证它是否属于此模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！