Angular 组件 - 在运行时创建或使用数据参数静态创建答案

【问题标题】：Angular component - Create at runtime or statically with data parameterAngular 组件 - 在运行时创建或使用数据参数静态创建
【发布时间】：2018-08-03 22:28:34
【问题描述】：

我使用 Angular CDK 并遵循 this excellent blog post 实现了一个自定义全屏对话框组件。

我想要做的是让我的组件接受注入的数据，但也静态地创建它。例如，我有一个组件来显示有关客户的一些数据。我希望有时在重叠对话框中显示相同的组件。当组件是静态的时，我可以通过 @Input 装饰器将客户数据传递给组件。当我动态创建它时，我可以使用上面提到的博客中所示的 @Inject 装饰器。

组件构造函数如下所示：

export class FilePreviewOverlayComponent {
  constructor(
    public dialogRef: FilePreviewOverlayRef,
    @Inject(FILE_PREVIEW_DIALOG_DATA) public image: any
   ) { }
}

在动态创建组件时注入数据效果很好，但是当我静态创建组件时得到StaticInjectorError。错误中的关键信息是No provider for FilePreviewOverlayRef!。

我不知道如何将组件设计为静态或动态创建，并能够将数据注入组件。

【问题讨论】：

标签： angular dependency-injection

【解决方案1】：

您可以通过在@Inject 之前使用@Optional() 来解决问题，如下所示。

export class FilePreviewOverlayComponent {
    constructor(
          @Optional() public dialogRef: FilePreviewOverlayRef,
          @Optional() @Inject(FILE_PREVIEW_DIALOG_DATA) public image: any
    ) { }
}

【讨论】：

现在阅读文档似乎很简单。我不知道我的搜索如何错过了文档中的 @Optional 。我编辑了您的答案以包含额外的第二个@Optional()。谢谢。