Question

我在spec.ts中从业力/茉莉花中得到了这个错误：

没有将“ 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

我知道这个问题已经在SO上被问过多次了，但没有一个关于'cdkStep'的。
有人知道我所缺少的吗？该组件工作正常-只是我无法简单地expect(component).toBeTruthy();才能成功。

Answer 1

您的组件取决于cdk-step组件，一旦您将TestBed 导入，它就会在您的CdkStepperModule中可用。

因为不是这种情况，Angular在遇到CdkStep标记时不会创建cdk-step的实例，因为未注册关联。因此，您将无法将这些模板变量绑定到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();

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

1 个答案: