Как передать и получить объект в компоненте NbDialog компонент nebular ngx-admin?

Я хочу передать объект в NbDialogComponent и как получить объект из NbDialogComponent.

Кто-нибудь скажет, правильный ли способ?

Я пробую этот способ передать объект, файл компонента:

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,
});

Ошибка машинописного текста: как исправить эту ошибку

Введите '{data: any; } 'не может быть присвоено типу' строка | Частично ». Литерал объекта может указывать только известные свойства, а «данные» не существуют в типе «Partial» .ts (2322) dialog-config.d.ts (47, 5): ожидаемый тип происходит из объявленного свойства «context» здесь в строке типа 'Partial ‹NbDialogConfig‹ | Частично ›› '

Я пытаюсь получить объект, DialogComponent File следующим образом:

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

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

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

Кто-нибудь скажет мне, как правильно передать и получить объект и как исправить ошибку машинописного текста.


typescript angular ngx-admin nebular
person ragu    schedule 30.12.2020    source источник
comment
вы хотите получить значение при закрытии диалога? Или напрямую с помощью EventEmitter   -  person Luay AL-Assadi    schedule 30.12.2020

Ответы (2)


arrow_upward
0
arrow_downward

ОБНОВЛЕНИЕ

Вы передаете data в качестве ключа в контексте вашего родительского компонента, однако в вашем DialogComponent нет data element, поэтому вы можете решить ошибку, добавив это в свой DialogComponent

@Input() data: any;

Теперь, если вы хотите получить значение при закрытии компонента, вы можете использовать метод подписки. предположим, что у нас есть два компонента:

  1. DialogComponent
  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 следующим образом:

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. 
  }
}

P.S: вы должны обработать, если пользователь закрывает диалоговое окно с помощью кнопки выхода или щелкает вне диалогового окна.

person Luay AL-Assadi    schedule 30.12.2020
comment
Я пробовал, но это не работает. я получил неопределенное - person ragu; 31.12.2020
comment
вы имеете в виду console.log(returnedObj) в ParentComponent или console.log(this.paymentData); в DialogComponent - person Luay AL-Assadi; 31.12.2020
comment
В DialogComponent - person ragu; 31.12.2020
comment
вы добавили компонент AgreementComponent в свой модуль как entryComponents: [AgreementComponent] - person Luay AL-Assadi; 31.12.2020
comment
извините за ошибки при копировании кода, я написал его, не проверяя его, кстати, ваша основная ошибка, что имя ключа в контексте должно совпадать с именем ввода в DialogComponent, я отредактировал ответ, вы можете проверить его сейчас - person Luay AL-Assadi; 31.12.2020

arrow_upward
0
arrow_downward

В вашем компоненте, где вы пытаетесь открыть и использовать диалог:

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;
person George Trad    schedule 22.03.2021