Угловой2 эталонный компонент внутри другого компонента

Question

Я следую учебнику Angular2, и мне нужно ссылаться на дополнительный компонент основного компонента. Я хочу вставить шаблон из «Курскомпонент» внутри тега <> основного компонента. Для этого я использую «директивы: []», но он не работает. Я получаю сообщение об ошибке: «Курсы» не являются известным элементом ». Директивы больше не используются для этого, и я должен делать это по-другому?

App.component.ts

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

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

export class AppComponent {} 

Courses.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'courses', 
    template: '<h2>Courses</h2>' 
}) 

export class CoursesComponent {} 

Answer 1

NOTE : IN RC6, you don't have to declare directives and pipes meta properties within @Component

Как AppComponent использует CourseComponent, вы должны объявить CourseComponent в метаданных декларации от @NgModule, как показано ниже.

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import {CoursesComponent} from './courses.component' 
@NgModule({ 
    imports:  [ BrowserModule], 
    declarations: [ AppComponent,CoursesComponent], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

ПРИМЕЧАНИЕ: Теперь Вы должны удалить директивы метаданных используется в @Component.

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

@Component({ 
    selector: 'my-app', 
    template: '<h1>My first Angular2 app</h1><courses></courses>', 
    //directives: [CoursesComponent]  //<-----remove this from here 
}) 

export class AppComponent {}