NullInjectorError:没有InjectionToken MatDialogData

时间:2019-09-18 15:48:17

标签: angular jasmine angular-material karma-jasmine

在Angular应用上运行茉莉花测试时出现此错误。

Error: StaticInjectorError(DynamicTestModule)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
  StaticInjectorError(Platform: core)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
    NullInjectorError: No provider for InjectionToken MatDialogData!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MyEditDialogComponent', InjectionToken MatDialogData ], ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 33554433, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 33554433, childFlags: 114688, directChildFlags: 114688, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 1, bindings: [  ], bindingFlags: 0, outputs: [  ], element: Object({ ns: '', name: 'app-edit-ban-dialog', attrs: [  ], template: null, componentProvider: Object({ nodeIndex: 1, parent: <circular reference: Object>, renderParent: <circular reference: Object>, bindingIndex: 0, outputIndex: 0, checkIndex: 1, flags: 114688, childFlags: 0, directChildFlags: 0, childMatchedQueries: 0, matchedQueries: Object, matchedQueryIds: 0 ...
Error: StaticInjectorError(DynamicTestModule)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
  StaticInjectorError(Platform: core)[MyEditDialogComponent -> InjectionToken MatDialogData]: 
    NullInjectorError: No provider for InjectionToken MatDialogData!

我正在导入我的组件:

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

在组件构造函数中,我正在向对话框中注入数据:

 @Inject(MAT_DIALOG_DATA) public data: {
        myData : MyData
    }

在我要输入的组件的业力茉莉花规格中:

import {
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    MatDialogRef,
    MAT_DIALOG_DATA,
    MatButtonModule,
    MatRadioModule,
    MatSelectModule
} from '@angular/material';

在该组件的业力/茉莉花规格中,beforeEach中的导入和提供者:

 beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [ MyFormComponent ],
        imports: [
            MatFormFieldModule,
            MatInputModule,
            MatDialogModule,                               
        ],
        providers: [
            { provide: MatDialogRef, useValue: {} },
            { provide: MAT_DIALOG_DATA, useValue: { myData: MyData } }
        ]
    }).compileComponents();
}));

我已经尝试过这些答案,但是它们不能解决问题 This This

3 个答案:

答案 0 :(得分:17)

就我而言,我导入了指令MatDialogModule,MAT_DIALOG_DATA和MatDialogRef

import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

,然后在beforeEatch()中:

imports: [ MatDialogModule],
providers: [
    { provide: MAT_DIALOG_DATA, useValue: {} },
    { provide: MatDialogRef, useValue: {} }
  ]

答案 1 :(得分:0)

尝试从业力茉莉花规范中删除MatDialogRef和MAT_DIALOG_DATA,以及需要进行对话框导入的组件,如下所示:

kubectl edit service servicename

答案 2 :(得分:-2)

在编辑对话框组件中,我正在将数据对象传递给close方法。我将其删除,错误消失了。

更改了此内容

this.dialogRef.close(myData);

对此:

 this.dialogRef.close();