Angular Material和Jasmine:"没有PullToken MdDialogData的提供者!"

Question

我有一个组件,用于Angular Material MdDialog:

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

  constructor(@Inject(MD_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

Answer 1

我补充说:

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

它的工作原理:)

谢谢你的帮助@methgaard!

Answer 2

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

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

和

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

Answer 3

作为更新,这也适用于那些使用前缀为"Mat"的标签的人

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

Answer 4

试试这个

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

让我知道事情的后续

Answer 5

你可以使用Angular 可选装饰器，我之前遇到过这个问题

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

constructor(
  @Optional() public dialogRef: MatDialogRef<PopupComponent>,
  @Optional() @Inject(MAT_DIALOG_DATA) public data: any
) {}