时间戳

首页 > 解决方案 > NullInjectorError: StaticInjectorError(AppModule)[Component-> MatDialogRef]

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

问题描述

我正在使用一个组件作为通过路由到达的常规组件，但我希望它在使用注入组件时也将其用作模式对话框的“目标”：

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的提供者！

如何调整该组件以在两种模式下工作？

标签： angulartypescriptdependency-injectionmodal-dialogangular-material

解决方案

我找到了组件中可选注入参数的解决方案：我在构造函数参数之前添加了 @Optional() 装饰器（只有在注册了提供程序时才应该注入）。

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

我在这里找到了解决方案： 带有可选参数的DI构造函数

推荐阅读