Angular 和 karma : Can't bind to 'list' since it isn't a known property of '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 should create the app Failed: Template parse errors: Can't bind to 'list' since it isn't a known property of '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组件:

View :

<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 文件相同的可见性。