Angular 6 在关闭 ngbModal 后将传递的参数恢复为原始值

Question

我有一个 table 和带有编辑和删除按钮的 objects，所以当我将一个参数（object 从 parentComponent 传递到一个"edit" 模态（使用 ngbModal）然后更改一些值但后来我后悔了，我用模态的 header 中的 X 关闭它 table 保持最后一个值改变，所以如何我可以将参数恢复到原来的值吗？

这是我的 parentComponent.ts 打开模态并传递参数的函数：

//receives the element from row and pass it to modal
openModalEdit(element){
    const modalRefCity = this.modalService.open(ModalEditComponent);
    modalRefCity.componentInstance.horario = element;

    modalRefCity.componentInstance.horarioevent.subscribe(($e) => {
        this.editHorario($e);
        this.modalService.dismissAll();
        console.log($e);
    })
}

这很好用，模式已打开，值已传递以供编辑。

这是我的 ModalEditComponent：

export class ModalEditComponent implements OnInit {

    @Input() horario;
    @Output() horarioevent = new EventEmitter<string>();

     constructor(public activeModal: NgbActiveModal) { }

    updateHorario(){

     this.horarioevent.emit(this.horario);
    }

这是我的modal-edit.component.html

<div class="modal-header">

 <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  ...

所以当我更改 horario 的值（从 parent 传递的参数）然后保存新值时它完美地工作，（编辑功能工作正常）。

问题是当我打开模态，然后更改 horario 的一些值然后后悔，所以使用模态中的 X 按钮关闭模态 header，模态被关闭但是 objects 显示它的值以及我所做的最后更改（我知道这仅在我看来不在我的数据库中）。

如何将参数重置为原始值？

Answer 1

您可以使用 Spread 语法将数据副本从父组件传递给子组件

modalRefCity.componentInstance.horario = {...element};

Spread syntax

Angular 6 在关闭 ngbModal 后将传递的参数恢复为原始值

Angular 6 restore passed parameter to its original values after close ngbModal

typescript

bootstrap-modal

ng-bootstrap

angular

angular6