Question

我使用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!。

我迷失了如何设计组件以将数据注入到组件中的方式来静态或动态创建。

Answer 1

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

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

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

1 个答案: