Angular2测试 - 失败:未捕获(在承诺中):错误:模板解析错误:无法绑定到"消息",因为它不是已知的属性

Question

我有两个组件,一个使用另一个.

第一个是:"GamePanelComponent" 其中包含html文件: "my-game-panel-output"tag

第二个是:

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",这没有帮助.

我真的坚持下去了.有人可以帮忙吗？

Answer 1

当您要测试您GamePanelComponent并将您放入<my-game-panel-output>模板中时，您GamePanelOutputComponent现在是一个子组件GamePanelComponent。由于您<my-game-panel-output>是一个自定义 HTML 元素，Angular 不知道如何处理它。因此您也必须声明它。

为了能够声明您的组件，您必须import首先声明它，就像您已经完成的那样：

import { GamePanelOutputComponent } from '../gamepaneloutput/gamepaneloutput.component';

现在您必须在您的中声明您的。GamePanelOutputComponentdeclarationsTestBed.configureTestingModule()

…… declarations: [ GamePanelComponent, GamePanelOutputComponent ], ​

当您的子组件是 a 的一部分Module（例如，<md-icon>形式 the @angular/material）时，您可以只使用import整个模块。

// Material Design Assets
import { MaterialModule } from '@angular/material';

要使用它，您必须将其导入GamePanelOutputComponent到imports您的TestBed.configureTestingModule(). 所有材质组件均已在模块中声明，因此无需再次声明。

…… imports: [ MaterialModule.forRoot() ], ​