Question

我正在尝试对AppComponent进行单元测试，并得到此错误：

无法绑定到“标头”，因为它不是的已知属性   “应用预览器”。


如果“ app-previewer”是Angular组件，并且具有“ header”输入，则请验证它是否属于此模块。

我认为这与我用来在父级（EditorComponent）和子级（PreviewerComponent）之间进行通信的 @Input 有关。此错误仅在测试期间发生。

app.component.spec.ts ：

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        EditorComponent,
        PreviewerComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

app.component.html ：

<app-editor></app-editor>

editor.component.ts ：

import { Component, OnInit } from '@angular/core';
import { Header } from '../model/Header';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {

  header: Header;

  constructor() {
    this.header = new Header();
  }

  ngOnInit() {
  }
}

editor.component.html ：

<app-previewer [header]="header"></app-previewer>

previewer.component.ts ：

import { Component, OnInit, Input } from '@angular/core';
import { Header } from '../model/Header';

@Component({
  selector: 'app-previewer',
  templateUrl: './previewer.component.html',
  styleUrls: ['./previewer.component.css']
})
export class PreviewerComponent implements OnInit {

  @Input() header: Header;

  constructor() {
  }

  ngOnInit() {
  }
}

Answer 1

尝试添加attr.：

<app-previewer [attr.header]="header"></app-previewer>

更多信息：angular docs。

Angular Test失败无法绑定到“ header”，因为它不是“ app-previewer”的已知属性

1 个答案: