在 HTML 中使用 MatSelect 测试 Angular 组件时出现笑话错误“无法绑定到 'panelClass'，因为它不是 'mat-select' 的已知属性”

Question

我的一些组件在其 HTML 中包含

MatSelect

，并且 对于每个此类组件的测试文件，我遇到以下问题。 自从我将我的设置从 Karma 转移到 Jest 后，（在 Angular 16、17、18 中）_仅在单元测试中_我得到了这个：

console.error
      NG0303: Can't bind to 'panelClass' since it isn't a known property of 'mat-select' (used in the 'DropdownWithVirtualScrollComponent' component template).
      1. If 'mat-select' is an Angular component and it has the 'panelClass' input, then verify that it is a part of an @NgModule where this component is declared.
      2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
      3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

应用程序构建得很好，这些组件也运行良好。如果我决定通过

panelClass

获取它，则测试能够记录

@ViewChild

:

  fit('should create', () => {
    console.log(component.matselect.panelClass);
    expect(component).toBeTruthy();
  });

当然，在 beforeEach 中，我在导入中确实有

MatSelect

：

await TestBed.configureTestingModule({ imports: [MatSelectModule, ...]})

奇怪的是，即使我将“NO_ERRORS_SCHEMA”添加到被测组件的“@NgModule.schemas”中，错误仍然存在。 如何修复这个错误？

Answer 1

我找到了一个部分答案，解决了导致问题的原因：它是我组件的 HTML 中使用的指令，在其

constructor

中注入 MatSelect。现在的问题是如何修复该错误。也许将 MatSelect 作为 @Input 传递给指令可以解决问题？一旦找到完整的解决方案，我将更新我的答案