没有将“exportAs”设置为“cdkStep”的指令

Question

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

没有将“exportAs”设置为“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

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

Answer 1

您的组件取决于组件，一旦您将其导入cdk-step其中，该组件就可以在您的组件中使用。TestBedCdkStepperModule

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

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

为了向选择器注册CdkStep，cdk-step您需要将您的设置重构为：

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