Angular2 测试 - 失败 : Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property of

Question

我有两个组件，一个使用另一个。

第一个是:“GamePanelComponent” 它有 html 文件，其中包含:“我的游戏面板输出”标签

第二个是:

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';

现在您必须声明您的GamePanelOutputComponent在declarations你的TestBed.configureTestingModule() .

... declarations: [ GamePanelComponent, GamePanelOutputComponent ],...

---

当您的子组件是 Module 的一部分时(例如 <md-icon> 形成 @angular/material )你可以只 import整个模块。

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

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

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