Question

我想将数据从孩子发送到父母。但是我没有在父级的html代码中使用子级的选择器，因为它是Angular Material的对话框，只使用“ MatDialogRef”和“ dialog.open（）” 在这种情况下，我无法使用“ EventEmiter”。单击对话框面板时如何发送数据？

Answer 1

首先，您的问题非常模糊，我认为很多人（包括我自己）都无法理解您的问题。但是，我将成为先知，并猜测您正在使用MatDialogue，并希望从中获取一些数据。您可以通过两种方式来实现此目标，具体取决于您的体系结构以及如何启动对话。

将父对象作为要操作的对话框的输入，因此您可以自动在父级别进行更改，就像在此链接 https://stackblitz.com/angular/njdkroaomnb?file=app%2Fdialog-overview-example-dialog.html 中找到的示例一样或
使用@Output()发出对象并在实现此对话框视图的父对象上侦听它。在这种情况下，您可以按照以下步骤操作：
- 制作模态对话组件 myModal.component.html 并实现show函数，如下所示：

<button (click)="onOpenClicked(content)" class="btn btn-primary" style="width:100%">
Open Modal</button>
<!-- Modal -->
<ng-template #content let-modalCon let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h5 class="modal-title" id="modal-basic-title">Create User</h5>
  </div>
  <div class="modal-body">
  PPut the body of the modal here
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="closeContent()">
      Cancel</button>
    <button type="button" class="btn btn-success" (click)="confirm()">Confirm</button>
  </div>
</ng-template>

在基础控制器上 myModal.component.ts 实现以下必要功能

constructor(
    config: NgbModalConfig,
    private modalService: NgbModal) {
    // Customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }
  
  @Output() public confirmEventEmitter = new EventEmitter();

  modalReference: any;
  onOpenClicked(content) {
      this.modalReference = this.modalService.open(content, { centered: false });
    }
  confirm() {
  this.confirmEventEmitter.emit('WhateverObjectYouHave');
  this.modalReference.close();
  }
  closeContent() {
  this.modalReference.close();
  }

然后，您可以通过将相应的标签导入到目标组件的DOM中并在模式组件发出如下所示的值时调用函数来在其他组件中使用此模式组件： <app-myModal (confirmEventEmitter)="onConfirmEventEmmited($event)"></app-myModal> 其中onConfirmEventEmmited(event:any)是主机的component.ts文件中的函数。我希望这会有所帮助。

是否可以在Angular中没有选择器的情况下发送数据？

1 个答案: