angular - 如何将组件导入 Angular 2 中的另一个根组件

Question

我正在尝试从一个文件导入组件到另一个根组件文件。 它给错误作为..

zone.js:484 Unhandled Promise rejection: Template parse errors: 'courses' is not a known element: 1. If 'courses' is an Angular component, then verify that it is part of this module. 2. If 'courses' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

My First Angular 2 App

[ERROR ->]"): AppComponent@0:31 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 'courses' is not a known element:

我的 app.component.ts 就像 [根组件文件]

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

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><courses></courses>',
  directives:[CoursesComponent],
})

export class AppComponent { }

我的 courses.component.ts 是;

import { Component } from '@angular/core';
@Component({
  selector: 'courses',
  template: '<h1>courses</h1>'
})
export class CoursesComponent { }

从 app.component 中的 courses.component.ts 文件导入类(class)组件时，我无法在 @Component{} 中声明指令

directives:[CoursesComponent] 给我错误

请指教解决方法。

Answer 1

你应该用declarations array(meta property) of @NgModule来声明它，如下所示(RC5 and later)，

import {CoursesComponent} from './courses.component';

@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent,CoursesComponent],  //<----here
  providers:    [],      
  bootstrap:    [ AppComponent ]
})