创建自己的组件和选择器会导致错误

Question

我的angular2应用程序有问题。我有那个代码：

// app.component.ts
import {Component} from '@angular/core';
import {CoursesComponent} from './courses.component'

@Component({
    selector: 'my-app',
    template: `<h1>Hello</h1><my-courses></my-courses>`,
    directives: [CoursesComponent]
})
export class AppComponent {
    name = 'Angular2';
}

和

// courses.component.ts
import {Component} from '@angular/core';

@Component({
    selector: 'my-courses',
    template: '<h2>Courses</h2>'
})
export class CoursesComponent {

}

我的应用程序无法运行。我从app.component.ts中的模板中删除<my-courses></my-courses>后，它开始工作，但没有我的课程组件。 我添加后，它会导致错误：

我做错了什么？

Answer 1

组件是否属于同一个module？ 如果是这样，我猜您没有导入/声明component中的module。

这样做：

import { CoursesComponent } from './your-path';
// ... other imports    

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
      AppComponent,
      CoursesComponent
      ...
  ],
  // ...

export class AppModule { ... }

此外，您无需在CoursesComponent AppComponent中导入AppModule。

Answer 2

只需将其添加到ngModule：

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

从CUSTOM_ELEMENTS_SCHEMA

导入@angular/core

这是因为您的组件选择器中有-。