Cách nhập thành phần vào thành phần gốc khác trong Angular 2

Question

Tôi đang cố nhập thành phần từ một tệp thành phần gốc khác. nó cho lỗi như ..

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 My giống như [file thành phần gốc]

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

và courses.component.ts tôi được;

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'courses', 
    template: '<h1>courses</h1>' 
}) 
export class CoursesComponent { } 

trong khi nhập khẩu các khóa học phần từ courses.component.ts nộp bên app.component tôi không phải là có thể khai báo chỉ thị bên @Component{}

directives:[CoursesComponent] đưa ra lỗi với tôi

Xin cho biết giải pháp trên nó.

Answer 1

Bạn nên khai báo nó với declarations array(meta property) of @NgModule như hình dưới đây (RC5 and later),

import {CoursesComponent} from './courses.component'; 

@NgModule({ 
    imports:  [ BrowserModule], 
    declarations: [ AppComponent,CoursesComponent], //<----here 
    providers: [],  
    bootstrap: [ AppComponent ] 
}) 

Answer 2

Đối với RC5 góc và RC6 bạn phải khai báo thành phần trong chính declarations module siêu dữ liệu trang trí, vì vậy thêm CoursesComponent trong mô-đun chính của bạn declarations như bên dưới và xóa directives từ AppComponent siêu dữ liệu.

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

góc RC5 & RC6

Nếu bạn đang nhận được các lỗi nêu trên trong của bạn Thử nghiệm Jasmine, rất có thể là vì bạn phải khai báo thành phần không thể phục hồi trong số 012 của bạn.

TestBed định cấu hình và khởi tạo môi trường để kiểm tra đơn vị và cung cấp các phương thức cho các thành phần và dịch vụ giả/tạo/tiêm trong các bài kiểm tra đơn vị.

Nếu bạn không khai báo thành phần trước khi thử nghiệm đơn vị của bạn được thực hiện, Góc sẽ không biết <courses></courses> nằm trong tệp mẫu của bạn.

Dưới đây là một ví dụ:

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

trên câu trả lời Nói cách đơn giản, bạn phải đăng ký dưới @NgModule 's

declarations: [ 
    AppComponent, YourNewComponentHere 
    ] 

của app.module.ts

đừng quên thành phần import đó .