NullInjectorError:StaticInjectorError(AppModule)[Component-> MatDialogRef]

时间:2019-07-29 17:39:18

标签: angular typescript dependency-injection modal-dialog angular-material

我将组件用作通过路由到达的常规组件,但是我希望它在注入组件时也将其用作模式对话框的“目标”:

export class Component1 implements OnInit {
constructor(private service: <someService>,
public dialogRef: MatDialogRef<Component1>, //These 2 lines are used as 
                                            //injection from the opener
@Inject(MAT_DIALOG_DATA) public data: any) {}

这是“揭幕战”的代码:

openComponent1aSModalPage()
{
  Const dialogRef = this.dialog.open(Component1, {
  width: '70%',
  height: '70%',
  data: {property: propertyValue}
 });

激活开门器时我可以工作,但是如果我尝试使用常规路线到达同一组件,则会得到:

  

错误:未捕获(承诺):NullInjectorError:StaticInjectorError(AppModule)[Component1-> MatDialogRef]:     StaticInjectorError(平台:核心)[Component1-> MatDialogRef]:       NullInjectorError:没有MatDialogRef的提供程序!

如何调整该组件使其在两种模式下均可工作?

1 个答案:

答案 0 :(得分:1)

我找到了组件中可选注入参数的解决方案: 我在构造函数参数之前添加了@Optional()装饰器(仅在注册了提供者的情况下才应注入)。

constructor(private service: <someService>,
@Optional() public dialogRef: MatDialogRef<Component1>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: any )

我在这里找到了解决方案: DI constructor with optional parameters