另一个组件内的Angular2引用组件

Question

我正在关注Angular2教程，我必须在主要组件中引用一个额外的组件。 我想从＆lt;里面的“CoursesComponent”中插入模板。课程＆gt;主要组件的标签。为此，我使用“指令：[]”，但它不起作用。我得到错误：'courses'不是一个已知的元素'。 指令不再用于此，我应该采用不同的方式吗？

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

  

注意：在RC6中，您无需在 @Component中声明指令和管道元属性 的

由于 AppComponent 使用 CourseComponent ，您必须在 @NgModule 的声明元数据中声明 CourseComponent ，如下所示

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 {}