Angular 和 Karma：无法绑定到“列表”，因为它不是“pq-button”的已知属性

Question

我的应用程序中有一个名为 pq-button 的组件：

<div class="container mt-5" *ngIf="categoryData">
  <div class="row">
    <div class="col">
      <h5 class="text-center">I am looking for a 
        <pq-button [list]="listCategories" (onSelect)="setCategory($event)" title="{{ category ? category.name : 'Category' }}"></pq-button> that can 
        <pq-button [list]="listCriteria" [disabled]="!category" (onSelect)="setCategory($event)" title="{{ criteria ? criteria.name : 'Criteria' }}"></pq-button> and is good for 
        <pq-button [list]="categoryData.list" [disabled]="!category" (onSelect)="setCategory($event)" title="{{ persona ? persona.name : 'Persona' }}"></pq-button></h5>
    </div>
  </div>  
</div>

当我加载我的应用程序时，它可以正常工作。 然后当我运行ng test 时，我得到的第一个错误是：

AppComponent 应该创建应用程序 失败：模板解析错误： 无法绑定到“list”，因为它不是“pq-button”的已知属性。

它说的第一件事是确保它是这个模块的一部分。 所以，当我查看我的模块时，我会看到：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http'; 

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { SelectorComponent } from './selector/selector.component';
import { ButtonComponent } from './button/button.component';


@NgModule({
  declarations: [
    AppComponent,
    SelectorComponent,
    ButtonComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,

    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

所以它是它的一部分。有谁知道它会失败的任何其他原因吗？

---

根据要求，这是 pq-button 组件和 pq-selector 组件：

观点：

<button class="btn" type="button btn-default" [ngClass]="{ 'btn-active': selected }" [disabled]="disabled" (click)="openSelector = !openSelector">{{ title }}</button>
<pq-selector [items]="items" colour="#e95344" (onSelect)="set($event)" [(visible)]="openSelector"></pq-selector>

代码：

import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';

@Component({
  selector: 'pq-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnChanges {  
  @Input() list: Function;
  @Input() title: string;
  @Input() disabled: boolean;
  @Output() onSelect = new EventEmitter<string>(); 
  items: any[];

  constructor() { }

  ngOnChanges() {
    if (!this.disabled)
        this.list().subscribe(response => this.items = response);
  }

  set($event) {
    this.onSelect.emit($event);
  } 
}

还有选择器html：

<div class="container-fluid selector" [ngStyle]="{'background-color': colour}" [@dialog] *ngIf="visible">
    <div class="row h-100 justify-content-center">
        <div class="col-2 my-auto">
            <ul class="list-unstyled">
                <li *ngFor="let item of items"><a href="#" (click)="select(item)">{{ item.name }}</a></li>
            </ul>
        </div>
    </div>
</div>

<button type="button" class="close" aria-label="Close" (click)="close()">
    <span aria-hidden="true">&times;</span>
</button>

和代码：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';


@Component({
  selector: 'pq-selector',
  templateUrl: './selector.component.html',
  styleUrls: ['./selector.component.scss'],
  animations: [
    trigger('dialog', [
      transition('void => *', [
        style({ transform: 'scale3d(.3, .3, .3)' }),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
      ])
    ])
  ]
})
export class SelectorComponent implements OnInit {
  @Input() items: any[];
  @Input() colour: string; 
  @Input() closable = true;
  @Input() visible: boolean;
  @Output() onSelect = new EventEmitter<string>();  
  @Output() visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  private show: boolean;

  constructor() { }

  ngOnInit() {
    this.colour = this.colour || '#000000';
  }

  select(item) {
    this.onSelect.emit(item);
    this.close();
  }

  close() {
    this.visible = false;
    this.visibleChange.emit(this.visible);
  }
}

希望对你有帮助！

Answer 1

在阅读了几个类似的场景后，我认为可能的解决方案是您需要确保app.component.spec.ts 具有以下内容：

import { ButtonComponent } from './button/button.component';

...

describe('AppComponent'), () => {

...

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ 
      ...
    ],
    declarations: [ ButtonComponent ]
  })
  .compileComponents();
}));

...

app.component.spec.ts 文件需要对子组件具有与 app.component.ts 文件相同的可见性。