如何在NbDialog与组件间传递接收对象及修复TS错误

我来帮你搞定这个NbDialog的传参问题和TypeScript报错～你的思路其实没问题，就是差了TypeScript泛型类型的定义，导致类型检查不通过，下面一步步给你说怎么改：

一、问题根源分析 #

你遇到的TypeScript错误，本质是NbDialogConfig默认的泛型约束是string | Partial<NbDialogContext>，而你传入的data属性不在这个默认类型里，所以TypeScript会判定这个属性不合法。解决的核心就是给对话框配置指定自定义的上下文类型，让TypeScript识别你要传递的data属性。

二、正确的父组件传参实现 #

首先，我们先定义一个明确的上下文类型，用来描述要传递给对话框的数据结构，然后在调用open方法时指定这个泛型：

import { NbDialogService } from "@nebular/theme";
import { AgreementComponent } from './your-path/agreement.component'; // 替换成你的组件实际路径

// 定义对话框的上下文类型，明确要传递的data结构
interface PaymentDialogContext {
  data: {
    service_id: number;
    information: Array<{ info: string }>;
    amount: number;
  };
}

constructor(private dialogService: NbDialogService) { }

// 准备要传递的业务数据
const paymentData = { 
  service_id: 1, 
  information: [{ info: 'test1' }, { info: 'test2' }], 
  amount: 1000, 
};

// 打开对话框，给open方法指定泛型：第一个是对话框组件类型，第二个是上下文类型
this.dialogService.open<AgreementComponent, PaymentDialogContext>(AgreementComponent, { 
  context: { data: paymentData }, // 现在TypeScript不会再报错了
  hasBackdrop: true, 
  closeOnBackdropClick: false, 
});

三、正确的对话框组件接收数据实现 #

不要通过dialogRef.componentRef.instance去拿数据，更规范的方式是直接从注入的NbDialogConfig里获取，同时保持类型安全：

import { Component, OnInit } from '@angular/core';
import { NbDialogRef, NbDialogConfig } from '@nebular/theme';
// 导入之前定义的上下文类型（如果在父组件定义的话），或者直接在当前组件内重新定义
import { PaymentDialogContext } from './your-path/parent.component';

@Component({
  selector: 'app-agreement',
  templateUrl: './agreement.component.html',
  styleUrls: ['./agreement.component.scss']
})
export class AgreementComponent implements OnInit {
  // 声明变量存储接收的数据，明确类型
  paymentData!: PaymentDialogContext['data'];

  constructor(
    protected dialogRef: NbDialogRef<AgreementComponent>,
    private dialogConfig: NbDialogConfig<PaymentDialogContext> // 注入配置并指定泛型
  ) { }

  ngOnInit(): void { 
    // 从配置的context中获取传递过来的数据
    this.paymentData = this.dialogConfig.context?.data;
    console.log('收到的对话框数据', this.paymentData);
  }

  // 可选：如果需要关闭对话框时返回数据给父组件
  closeDialogWithResult() {
    // 比如返回修改后的数据
    const modifiedData = { ...this.paymentData, amount: 2000 };
    this.dialogRef.close(modifiedData);
  }
}

如果需要接收对话框返回的数据，父组件可以这样处理：

// 给open方法增加第三个泛型参数，指定返回数据的类型
this.dialogService.open<AgreementComponent, PaymentDialogContext, PaymentDialogContext['data']>(AgreementComponent, {
  context: { data: paymentData },
  hasBackdrop: true,
  closeOnBackdropClick: false,
}).onClose.subscribe((result) => {
  if (result) {
    console.log('对话框返回的数据', result);
    // 在这里处理返回的业务逻辑
  }
});

四、TypeScript错误的核心修复总结 #

• 必须给NbDialogService.open()方法指定泛型参数：分别对应对话框组件类型、上下文类型、返回数据类型（可选）。
• 定义明确的上下文类型，让TypeScript能够做类型校验，避免“属性不存在”的报错。
• 接收数据时通过NbDialogConfig获取，比直接操作componentRef更符合Angular和Nebular的设计规范，也更类型安全。

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