Angular CDK Dialog.open泛型参数解析：中间D类型是什么？

我正在确定Angular CDK Dialog的open函数泛型参数的含义，已明确第一个泛型R是对话框关闭时返回的数据类型，原以为第三个泛型C是传入对话框的输入数据类型，但不清楚中间的泛型D的作用。

open函数的接口定义如下：

open<R = unknown, D = unknown, C = unknown>(component: ComponentType<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
open<R = unknown, D = unknown, C = unknown>(template: TemplateRef<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;
open<R = unknown, D = unknown, C = unknown>(componentOrTemplateRef: ComponentType<C> | TemplateRef<C>, config?: DialogConfig<D, DialogRef<R, C>>): DialogRef<R, C>;

泛型D被用于DialogConfig类中，其相关定义如下：

/** Configuration for opening a modal dialog. */
export declare class DialogConfig<D = unknown, R = unknown, C extends BasePortalOutlet = BasePortalOutlet> {
    ...
    /**
     * Providers that will be exposed to the contents of the dialog. Can also
     * be provided as a function in order to generate the providers lazily.
     */
    providers?: StaticProvider[] | ((dialogRef: R, config: DialogConfig<D, R, C>, container: C) => StaticProvider[]);
    /**
     * Component into which the dialog content will be rendered. Defaults to `CdkDialogContainer`.
     * A configuration object can be passed in to customize the providers that will be exposed
     * to the dialog container.
     */
    container?: Type<C> | {
        type: Type<C>;
        providers: (config: DialogConfig<D, R, C>) => StaticProvider[];
    };
 ...

泛型D的具体含义 #

泛型D是DialogConfig中自定义输入数据的类型，它对应DialogConfig里的data属性类型——也就是你要传入对话框的自定义数据的类型。

同时它的作用范围还包括：

• 在延迟生成提供者的函数中，可通过config参数获取该类型的数据，动态生成所需的提供者
• 自定义对话框容器组件注入DialogConfig后，能读取该类型的数据用于自身逻辑处理

另外需要纠正你之前的泛型对应误解：

• 第三个泛型C不是输入数据类型，而是对话框内容组件的类型（或模板的上下文类型）
• 你原本以为的「传入对话框的输入数据类型」，正是泛型D对应的内容

示例代码 #

定义自定义数据类型：

interface CustomDialogData {
  theme: 'light' | 'dark';
  title: string;
}

打开对话框时指定泛型：

const dialogRef = dialog.open<DialogResult, CustomDialogData, MyDialogComponent>(
  MyDialogComponent,
  {
    data: { 
      theme: 'dark',
      title: '自定义对话框'
    }
  }
);

在对话框组件中获取自定义数据：

import { DialogConfig } from '@angular/cdk/dialog';

constructor(private config: DialogConfig<CustomDialogData>) {
  console.log(config.data.theme); // 输出'dark'
  console.log(config.data.title); // 输出'自定义对话框'
}

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri