我是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 {

}

显示两个错误:

如果my-component是一个Angular组件,那么验证它是否是这个模块的一部分。 如果my-component是Web组件,那么将CUSTOM_ELEMENTS_SCHEMA添加到@NgModule中。模式来抑制此消息。

请帮助。


当前回答

检查父组件在哪个模块中被声明…

如果父组件定义在共享模块中,那么子模块也必须定义在共享模块中。

父组件可以在共享模块中声明,而不是在基于文件目录结构/命名的逻辑模块中声明,即使在我的例子中,Angular CLI也将它添加到错误的模块中。

其他回答

你必须在你的AppComponent的同一个模块中声明你的MyComponentComponent。

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

检查filename. ponent.ts中的选择器

在各种html文件中使用标签

<my-first-component></my-first-component>

应该是

<app-my-first-component></app-my-first-component>

例子

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

在我的例子中,我在Shared模块中有一个组件。

组件正在加载并且工作良好,但typescript用红线突出显示html标记,并显示此错误消息。

在这个组件中,我注意到我没有导入rxjs操作符。

import {map} from 'rxjs/operators';

当我添加这个导入时,错误消息消失了。

检查组件内的所有导入。

希望它能帮助到别人。

检查父组件在哪个模块中被声明…

如果父组件定义在共享模块中,那么子模块也必须定义在共享模块中。

父组件可以在共享模块中声明,而不是在基于文件目录结构/命名的逻辑模块中声明,即使在我的例子中,Angular CLI也将它添加到错误的模块中。

有同样的问题,发现模板组件标签与<app-[component-name]></app-[component-name]>一起工作。因此,如果你的组件名为mycomponent.component.ts:

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <app-mycomponent></app-mycomponent>
  `,