Angular（模态窗口）中的方法未订阅该事件答案

【问题标题】：The event is not subscribed by method in Angular (modal window)Angular（模态窗口）中的方法未订阅该事件
【发布时间】：2020-11-28 12:42:46
【问题描述】：

我有模态窗口和调用此模态窗口的组件。当我尝试关闭此模式窗口时，需要关闭它的方法 - 不要调用，因为此方法在事件发出时启动。但是方法订阅没有发生。

export class TakeOrderFormComponent implements OnInit
{
  @ViewChild('orderSucModal') orderSuccessModal: OrderSuccessComponent;
  orderSuccessRef: BsModalRef;

  constructor(private orderService: OrderService, private cartService: CartService,
              private modalService: BsModalService, private router: Router)
  {
  }

  openCartModal(orderId: number): void
  {
    this.orderSuccessModal.loadOrder(orderId);
    this.orderSuccessRef = this.modalService.show(this.orderSuccessModal.template, {ignoreBackdropClick: true});
  }

  hideSucModal(): void
  {
    console.log('in parent start')
    this.orderSuccessRef.hide();
    console.log('in parent stop')
  } ...

这是主块中模态窗口的代码。并且这里的方法hideSucModal() 没有被调用。

<app-order-success
  #orderSucModal
  (hideModal)="hideSucModal()">
</app-order-success>

所有模态窗口代码

    <ng-template #orderSuccess class="modal-md">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Ваше замовлення <b>№{{order.orderId}}</b> успішно оброблено!</h4>
    </div>
    <div class="modal-body">
     
      <div class="modal-footer">
        <button (click)="hideModalClick()" class="btn btn-outline-success"
                type="button">Зрозуміло!
        </button>
      </div>
    </div>
  </div>
</ng-template>

这是模态组件的逻辑

export class OrderSuccessComponent
{
  @ViewChild('orderSuccess') template: TemplateRef<any>;
  @Output() hideModal: EventEmitter<void> = new EventEmitter<void>();
  @Output() confirm: EventEmitter<void> = new EventEmitter<void>();

  public order: Order = new Order();
  public dateAndTime: string[] = [];

  constructor(private orderService: OrderService, private router: Router)
  {
  }

  hideModalClick(): void
  {
    console.log('in child start')
    this.hideModal.emit();
    this.router.navigate(['/home']);
    console.log('in child stop');
  }...

其实我做了一些研究，我认为hideSucModal()这个方法不能订阅hideModal事件。对此有什么想法吗？

【问题讨论】：

标签： javascript angular typescript events modal-dialog

【解决方案1】：

也许你可以做一些小的重构：

1) 在核心组件中 从“@angular/material/dialog”导入 { MatDialog }；

添加构造函数 构造函数( ... ,private matDialog: MatDialog )

打开模态窗口使用 this.matDialog.open(OrderSuccessComponent, {data},width:'100%', height:'90%')

2) 在 OrderSuccessComponent

添加构造函数
构造函数( ... ,private dialogRef: MatDialogRef )

现在你可以在 hideModalClick() 中调用 this.dialogRef.close()

注意核心和子组件中使用的不同实体（MatDialog vs MatDialogRef）！

【讨论】：