当表单编辑角度时，ngb modal 将数据传递给答案

【问题标题】：ngb modal pass the data to when form edit angular当表单编辑角度时，ngb modal 将数据传递给
【发布时间】：2021-10-03 13:11:23
【问题描述】：

我正在使用 ngb 模态进行表单编辑。这是我的编辑按钮功能

  editCheckin(data: CheckInModel, details: any) {
console.log(data);
this.modalService.open(details, { ariaLabelledBy: 'modal-basic-title', size: 'xl', backdrop: 'static' }).result.then((id) => {
}, (reason) => {

});

} 当我单击编辑按钮时，上面的函数调用并正确加载弹出窗口。这是我的编辑按钮

  <button mat-stroked-button type="button" class="action-btn"
                                    (click)="editCheckin(element, details)">
                                    <i class="fas fa-pencil-alt"></i>
                                </button>

编辑对象正确传递。 console.log(data) 结果如下所示

现在我需要该控制台记录的数据到我的弹出窗口。我是怎么通过的。

【问题讨论】：

标签： javascript angular

【解决方案1】：

您可以直接编辑组件实例，例如

在您的模式中添加一个属性：

data: CheckInModel

当您调用模态时，您只需这样做：

openModal() {
   const modalRef = this.modalService.open(ModalContentComponent);
   modalRef.componentInstance.data = this.data;
}

在我的应用程序中，我有一个包装 ngb 模态服务的自定义服务：

export class ModalService {
  constructor(private modalService: NgbModal) {}

  open<C, T>(content: unknown, config?: T, options?: NgbModalOptions): ModalRef<C> {
    const modal = this.modalService.open(content, {
      centered: true,
      backdrop: true,
      size: 'm',
      ...options,
    });
    Object.assign(modal.componentInstance, config);
    return modal;
  }
}

这样我可以简单地用我的服务调用我的模态并传递数据：

    const ref = this.modalService.open<GenericModalComponent, GenericModalData>(
      GenericModalComponent,
      {
        data: 'this will be passed to the modal instance'
      }
    );

重要的是模态有一个同名的已定义属性（这里是数据）

更多Here

【讨论】：