angular - 没有将 "exportAs"设置为 "cdkStep"的指令

Question

我在我的 spec.ts 中从 karma/jasmin 收到此错误:

There is no directive with "exportAs" set to "cdkStep"

<!-- Step 1 -->
<cdk-step [ERROR ->]#step1="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 2 -->
<cdk-step [ERROR ->]#step2="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 3 -->
<cdk-step [ERROR ->]#step3="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 4 -->

我在我的组件中声明了这个:

@ViewChild('step1') private step1: CdkStep;
@ViewChild('step2') private step2: CdkStep;

这是 TestBed 配置:

    TestBed.configureTestingModule({
        declarations: [ StepsComponent ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();

总的来说，我的代码与这个 Stackblitz 示例非常相似:
https://stackblitz.com/edit/angular-cdk-stepper-demo

我知道这个问题已经在 SO 上被问过多次，但没有一个与“cdkStep”有关。
有人知道我错过了什么吗？该组件工作正常 - 只是我无法通过简单的 expect(component).toBeTruthy(); 获得成功。

Answer 1

您的组件依赖于cdk-step组件，一旦您导入CdkStepperModule<，该组件就可以在您的TestBed中使用 进入其中。

因为情况并非如此，每当 Angular 遇到 cdk-step 标记时，它都不会创建 CdkStep 的实例，因为关联尚未注册。因此，您将无法将这些模板变量绑定(bind)到 CdkStep 的实例，因为此类实例根本不存在。

通常情况下，每当遇到未知/自定义标签时，Angular 都会通过抛出典型的 some-component is not an Angular component 来提示，但因为您正在使用 CUSTOM_ELEMENTS_SCHEMA 此检查被跳过。

为了使用 cdk-step 选择器注册 CdkStep，您需要将设置重构为:

import { CdkStepperModule} from '@angular/cdk/stepper';
...
TestBed.configureTestingModule({
    imports: [CdkStepperModule],
    declarations: [StepsComponent]
}).compileComponents();