我试图从一个文件导入组件另一个根组件文件。它给出了错误..
zone.js:484未处理的Promise拒绝:模板解析错误:'courses'不是已知元素:1。如果'courses'是Angular组件,则验证它是否是此模块的一部分。 2.如果“courses”是Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schema”以禁止显示此消息。 (”
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]
给我错误
请告知解决方案。
您应该使用declarations array(meta property) of @NgModule
声明它,如下所示(RC5 and later
),
import {CoursesComponent} from './courses.component';
@NgModule({
imports: [ BrowserModule],
declarations: [ AppComponent,CoursesComponent], //<----here
providers: [],
bootstrap: [ AppComponent ]
})
对于Angular 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 { }
角度RC5和RC6
如果您在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();
});
});
以上答案简单来说,你必须在@NgModule
下注册
declarations: [
AppComponent, YourNewComponentHere
]
app.module.ts
别忘了import
那个组件。