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

【问题标题】：NullInjectorError: StaticInjectorError(AppModule)[Component-> MatDialogRef]NullInjectorError: StaticInjectorError(AppModule)[Component-> MatDialogRef]
【发布时间】：2019-07-29 17:39:18
【问题描述】：

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

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

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

【问题讨论】：

嘿，我在 Angular-material 上工作不多，但如果你可以在 stackblitz.com 上创建演示，我可以尝试更好地理解你的疑问。到目前为止，我无法清楚地理解您的问题
试试这个github.com/angular/components/issues/…
@Shashank Vivek - 试图澄清：一开始我的组件是一个常规组件，在构造函数中没有 2 个注入参数：public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) 公共数据：任何） {}。然后 - 当使用它作为模态对话框的目标时 - 我添加了这两个作为示例显示我的：material.angular.io/components/dialog/examples - 现在它作为模态工作，但是当使用常规路由到达它时 - 我假设它期望获得这两个参数，未注入。我想我需要让它们成为可选的......

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

【解决方案1】：

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

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

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

【讨论】：