将模态表单数据传递给另一个在 Angular 中不工作的组件

Question

我有一个模式（弹出窗口），其中有一个表单。当用户填写该表单并点击 Add 按钮时，我想将该表单值传递给它显示的组件。（结果）

我试过如下，但它不执行 this.modalRef.content.onClose.subscribe 方法。有人可以在这里指出问题吗？

myComponent.ts

modalRef?: BsModalRef | null;
constructor(private modalService: BsModalService) { }

addItem(): void{
      const initialState = {
            backdrop: true,
            ignoreBackdropClick: true,
            class: 'modal-xl',
          };

          this.modalRef = this.modalService.show(ItemProfileComponent, { ...initialState, backdrop: true, ignoreBackdropClick: true, class: 'modal-lg', });
          this.modalRef.content.onClose.subscribe((result: any) => {
            console.log(result); 
            if (result) {
              this.itemtList.push(result);
              this.itemAdd.emit(this.itemtList);
            }
          });

  }

ItemProfileComponent.ts（模态分量）

public onClose: Subject<any> | undefined;
constructor(private bsModalRef: BsModalRef) {}

  ngOnInit(): void {
    this.onClose = new Subject();
  }
     close(): void {
      this.bsModalRef?.hide();
    }

ItemProfileComponent.html

<div class="modal-header">
    <h4 class="modal-title pull-left fw-bold" id="my-modal-title">Add New<span *ngIf="isItem"> Item</span></h4>
    <button role="button" class="btn-close close pull-right" aria-label="Close" (click)="close()">
        <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
</div>
    
    <div class="p-2">
        <div class=" p-2">
     <!--Form-->
        <div *ngIf="!isCompany">
            <app-contact-profile [isContactHeader] = "false" [contactData] = "agentContactList" (saveContact) = "addAgentContact($event)"></app-contact-profile>
        </div>
    </div>
</div>

Answer 1

您忘记调用 next()，将表单数据作为参数传递。您还应该致电 complete() 取消订阅。

close(): void {
   this.onClose.next(formData);
   this.onClose.complete();
   this.bsModalRef?.hide();
}

假设您想在每次关闭时发送数据，当用户只想取消时，您可能需要一个单独的函数。 IE。一个 submit() 和一个 close().

将模态表单数据传递给另一个在 Angular 中不工作的组件

Passing modal form data to another component not working in Angular

typescript

angular-components

angular