我在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();
才能成功。
答案 0 :(得分:2)
您的组件取决于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();