如何將組件導入到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 { } 

而從courses.component.ts導入課程組件文件內app.component我不是裏面@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重要組成部分，所以你的主模塊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 3

角RC5 & RC6

如果您收到上面提到的錯誤你茉莉花測試，這很可能是因爲你必須在012中聲明不可修改的組件。

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的

declarations: [ 
    AppComponent, YourNewComponentHere 
    ] 

的app.module.ts註冊

不要忘記到import那個組件。