82

我有一个要在 Angular Material MdDialog 中使用的组件：

@Component({
  ...
})
export class MyComponent {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: 
MdDialogRef<MyComponent>) {
...
  }


}

我正在尝试用 Jasmine 对其进行单元测试：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedTestingModule,
      ],
      declarations: [
        MyComponent,
      ],
    })
    .compileComponents();
  }));

  ...
  
});

不幸的是，我收到以下错误：

错误：没有 InjectionToken MdDialogData 的提供者！

SharedTestingModule 导入和导出我的自定义 Angular Material 模块，该模块本身导入和导出 MdDialogModule。

我怎样才能摆脱这个错误？

非常感谢你！

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3
4

8 回答 8

140

我添加了这个：

providers: [
    { provide: MAT_DIALOG_DATA, useValue: {} },
    { provide: MdDialogRef, useValue: {} }
]

它有效:)

感谢您的帮助@methgaard！

于 2017-06-29T15:02:26.353 回答
97

对于具有最新材料组件的 Angular 5

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

和

 providers: [
     { provide: MAT_DIALOG_DATA, useValue: {} },
     { provide: MatDialogRef, useValue: {} }
 ]
于 2018-01-13T02:25:30.477 回答
15

试试这个

beforeEach(async(() => {
 TestBed.configureTestingModule({
   imports: [
     SharedTestingModule,
   ],
   declarations: [
     MyComponent,
   ],
   providers: [ <-- here
    {
     provide: MdDialogData,
     useValue: {},
    }
   ] <-- to here 
 })
 .compileComponents();
}));

让我知道事情的后续

于 2017-06-29T13:37:07.493 回答
13

作为更新，这也适用于那些使用带有前缀“Mat”的标签的人

providers: [{provide: MAT_DIALOG_DATA, useValue: {}}, 
{provide: MatDialogRef, useValue: {}}]
于 2017-10-16T22:35:38.770 回答
4

您可以在 jasmine 测试中注入 MAT_DIALOG_DATA / MAT_BOTTOM_SHEET_DATA 而无需指定提供者。您必须确保注入的值不为空。如果它为 null，编译器会将 null 值误认为是不存在的提供程序，并且您会收到未找到提供程序的错误。

于 2019-06-18T12:27:22.677 回答
3

您可以使用Angular Optional decorator，我之前遇到过这个问题

如果该组件不用作弹出窗口，请尝试此代码段

constructor(
  @Optional() public dialogRef: MatDialogRef<PopupComponent>,
  @Optional() @Inject(MAT_DIALOG_DATA) public data: any
) {}
于 2020-08-24T12:12:20.770 回答
0

尝试在您的<x>.component.spec.ts下添加providers：

{ provide: MatDialog, useValue: {} }

在某些情况下，您还需要：

{ provide: MatDialogRef, useValue: {} }

（这种方式在我的 Angular 11 项目中工作）

于 2021-03-17T13:45:04.980 回答
0

没有 InjectionToken MatDialogData 的提供者！，当我们运行测试用例时，当我们使用带有 @Inject(MAT_DIALOG_DATA) 公共值的 matdialog 引用时会发生此错误：字符串，在受尊重的组件中。

在 spec.ts 文件中添加以下代码

提供者：[MatDialogModule，{提供：MAT_DIALOG_DATA，useValue：{}}，{提供：MatDialogRef，useValue：{}}]

于 2022-02-05T02:49:54.073 回答