我有两个组件,一个使用另一个.
第一个是：“GamePanelComponent”,其中包含以下内容的html文件：
“my-game-panel-output”标签
第二个是：
import { Component,Input } from '@angular/core';
@Component({
moduleId: module.id,selector: 'my-game-panel-output',templateUrl: 'gamepaneloutput.component.html',styleUrls: [ 'gamepaneloutput.component.css' ]
})
export class GamePanelOutputComponent {
@Input()
message: string;
}
我给GamePanelComponent写了一个测试：
import { ComponentFixture,TestBed,async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { GamePanelComponent } from './gamepanel.component';
import { GamePanelOutputComponent } from '../gamepaneloutput/gamepaneloutput.component';
describe('GamePanelComponent (inline template)',() => {
let comp: GamePanelComponent;
let fixture: ComponentFixture<GamePanelComponent>;
beforeEach( async ( () => {
TestBed.configureTestingModule({
declarations: [ GamePanelComponent ],// declare the test component
}).compileComponents()
.then(() => {
fixture = TestBed.createComponent(GamePanelComponent);
comp = fixture.componentInstance;
});
}));
it('isValidMove',() => {
comp.ngOnInit();
let isValid = comp.isValidMove(0,0);
expect(isValid).toBe(false);
});
});
不幸的是,测试因此错误而失败：
Failed: Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property of 'my-game-panel-output'.
正如您所看到的,我尝试导入“GamePanelOutputComponent”,但这没有帮助.
我真的坚持下去了.
有人可以帮忙吗？
解决方法
当你要测试你的GamePanelComponent并放置你的< my-game-panel-output>在模板中,您的GamePanelOutputComponent现在是GamePanelComponent的子组件.由于你的< my-game-panel-output>是一个自定义HTML元素角度不知道如何处理它.因此,您还必须声明它.
为了能够声明您的组件,您必须先导入它,就像您已经完成的那样：
import { GamePanelOutputComponent } from '../gamepaneloutput/gamepaneloutput.component';
现在,您必须在TestBed.configureTestingModule()的声明中声明您的GamePanelOutputComponent.
…
声明：[GamePanelComponent,GamePanelOutputComponent],
…
当您的子组件是模块的一部分时(例如,< md-icon>形成@ angular / material),您只需导入整个模块即可.
// Material Design Assets
import { MaterialModule } from '@angular/material';
要使用它,您必须在TestBed.configureTestingModule()的导入中将其导入GamePanelOutputComponent.所有材料组件都已在模块中声明,因此无需再次声明它们.
…进口：[MaterialModule.forRoot()],…
