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

Question

我正在尝试从一个文件导入组件到另一个根组件文件。它给出错误 ..

zone.js:484 Unhandled Promise rejection: Template parse errors: 'courses' is not a known element: 1. If 'courses' is an Angular component, then verify that it is part of this module. 2. If 'courses' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
My First Angular 2 App
[ERROR ->]"): AppComponent@0:31 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 'courses' is not a known element:

我的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

对于 Angular RC5 和 RC6，您必须在模块元数据装饰器的 declarations 键中声明组件，因此在您的主模块 declarations 中添加 CoursesComponent 作为 并从 AppComponent 元数据中删除 directives。

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 2

您应该使用 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 3

Angular RC5 & RC6

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

TestBed 为单元测试配置和初始化环境，并为单元测试中的mocking/creating/injecting 组件和服务提供方法。

如果在执行单元测试之前不声明组件，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 的

下注册

declarations: [
    AppComponent, YourNewComponentHere
  ]

共app.module.ts

不要忘记 import 该组件。

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

How to import component into another root component in Angular 2

angular2-directives

angular

My First Angular 2 App