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

Question

我试图从一个文件导入组件另一个根组件文件.它给出了错误..

zone.js:484未处理的Promise拒绝:模板解析错误:'courses'不是已知元素:1.如果'courses'是Angular组件,则验证它是否是此模块的一部分.2.如果"courses"是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的"@NgModule.schema"以禁止显示此消息.("

我的第一个Angular 2 App

[错误 - >]"):AppComponent @ 0:31;区域:;任务:Promise.then;值:错误:模板解析错误:(...)错误:模板解析错误:'courses'不是已知元素:

我的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文件导入课程组件时,我无法在其中声明指令 @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 ]
})

Answer 2

对于角度RC5和RC6必须声明在模块元装饰器的组件declarations关键,所以加CoursesComponent你的主模块中declarations的下面,并删除directives从AppComponent元数据.

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

Answer 3

角度RC5和RC6

如果您在Jasmine测试中遇到上述错误,很可能是因为您必须在您的Jasmine测试中声明不可撤消的组件TestBed.configureTestingModule({}).

TestBed为单元测试配置和初始化环境,并提供在单元测试中模拟/创建/注入组件和服务的方法.

如果在执行单元测试之前未声明组件,Angular将不知道<courses></courses>模板文件中的内容.

这是一个例子:

import {async, ComponentFixture, TestBed} from "@angular/core/testing";
import {AppComponent} from "../app.component";
import {CoursesComponent} from './courses.component';

describe('CoursesComponent', () => {
  let component: CoursesComponent;
  let fixture: ComponentFixture<CoursesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CoursesComponent
      ],
      imports: [
        BrowserModule
        // If you have any other imports add them here
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CoursesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 4

以上答案简单来说,你必须在@NgModule's 下注册

declarations: [
    AppComponent, YourNewComponentHere
  ] 

的 app.module.ts

不要忘记import那个组成部分.