如何在組件中傳遞和接收 object 到 NbDialog 組件 nebular ngx-admin？

Question

我想將 object 傳遞給 NbDialogComponent 以及如何從 NbDialogComponent 獲取 object。

有人說，方法正確嗎？

我嘗試這種方式通過 object，組件文件：

import { NbDialogService } from "@nebular/theme";

constructor(private dialogService: NbDialogService) { }

const paymentData : any = {
  service_id: 1,
  information: [{info:'test1'},{info:'test2'}],
  amount: 1000,
};

this.dialogService.open(AgreementComponent, {
  context: {data: paymentData}, // here i have got typescript error 
  hasBackdrop: true,
  closeOnBackdropClick: false,
});

Typescript 錯誤：如何修復此錯誤

輸入'{數據：任何； }' 不可分配給類型 'string | 部分的'。 Object literal may only specify known properties, and 'data' does not exist in type 'Partial'.ts(2322) dialog-config.d.ts(47, 5): The expected type comes from property 'context' 這是聲明在此處輸入 'Partial<NbDialogConfig<string | 部分>>'

我嘗試通過這種方式獲取對象，DialogComponent 文件：

import { NbDialogRef } from '@nebular/theme';

constructor(protected dialogRef: NbDialogRef<AgreementComponent>) {}

ngOnInit(): void {
console.log('dialogRef', this.dialogRef.componentRef.instance.data);
}

誰能告訴我如何正確傳遞和接收 object 以及如何修復 typescript 錯誤。

Answer 1

更新

您正在從父組件傳遞data作為上下文中的鍵，但是 DialogComponent 中沒有data element ，因此您可以通過將其添加到 DialogComponent 來解決錯誤

@Input() data: any;

現在，如果您想在組件關閉時獲得價值，您可以使用 subscribe 方法。 假設我們有兩個組件：

1. 對話框組件
2. 父組件

在您的父組件中，我們將像這樣調用 DialogComponent：

this.dialogService.open(AgreementComponent, {
  context: {
    paymentData: paymentData // You should name key same as dialog component element here i have got typescript error 
  }, 
}).onClose.subscribe(returnedObj => {
  console.log(returnedObj);
});

在您的 DialogComponent 中，我們將在 close 方法中返回我們想要的 object，如下所示：

import { Input } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';

/** Here Your Component Declaration **/
export class AgreementComponent implements OnInit {
  @Input() paymentData: any;

  constructor(private dialog: NbDialogRef<any>) {}

  ngOnInit(): void {
    console.log(this.paymentData);
  }

  doSomethingHere(){
    var tempObject = {...this.paymentData}
        tempObject.extraData = 'testMe'
    this.close(tempObject)
  }
  
  close(returnedObject = null){
    this.dialog.close(returnedObject); // <- this closes the dialog. 
  }
}

PS：如果用戶使用轉義按鈕關閉對話框或單擊對話框外，您應該處理。

Answer 2

在您嘗試打開並使用對話框的組件中：

 this.dialogService.open(ComponentName, { context: { propertyName: propertyValue, }, }).onClose.subscribe({ next: (res) => { console.log(res); }, error: (err) => console.error(`Observer got an error: ${err}`), }); }

在您的對話框組件中：

@Input() propertyName: any;

Answer 3

 // when u call your Dialog
openDialog() {
    this.dialogService.open(YourComponentCallBack, {
      context: {
        data: this.code,
      },
    });
  }
// in --->YourComponentCallBack you need to get your varriable
// add this line
  @Input() data: any;