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

【问题标题】：Angular2 reference component inside another component另一个组件内的Angular2引用组件
【发布时间】：2016-09-11 07:30:23
【问题描述】：

我正在学习 Angular2 教程，我必须将一个额外的组件引用到主组件。我想在主组件的标记内插入“CoursesComponent”中的模板。为此，我使用“指令：[]”，但它不起作用。我收到错误消息：'课程'不是已知元素'。指令是否不再用于此目的，我应该采取不同的方式吗？

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

【问题讨论】：

你使用的是angular2 RC.6吗？
您必须告诉我们您现在使用的是哪个版本的 Angular2？
它是 Angular2 RC.6，是的

标签： angular reference components

【解决方案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 {}

【讨论】：