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

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

1 个答案: