angular - 订阅 Angular Material Dialog 的 observable？

Question

我是 Angular 的新手，可能做错了。我正在尝试观察返回可观察对象的 backdropClick 事件。当该事件发生时，我想调用一个名为 openSaveConfirmationModal()

的方法

下面是我的两个组件。组件 #1 是打开我的表单对话框的地方。组件 #2 是具有所有表单字段属性和方法的实际对话框。我不确定我的订阅必须去哪里或如何去做，但根据我的研究，我这样做了:

组件#1

import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import { EditClientUserComponent } from './edit-client-user.component';
import {ConfirmationDialogComponent} from "app/shared/confirmation-dialog.component";
import {ConfirmationDialogData} from "app/shared/confirmation-dialog-data.model";

@Component({
    moduleId: module.id,
    selector: 'organization-users',
    templateUrl: './organization-users.component.html',
    styleUrls: ['./organization-users.component.css']
  })

export class OrganizationUsersComponent implements OnInit {

constructor(
    public dialog: MdDialog,
    public dialogRef: MdDialogRef<EditClientUserComponent>  ) {
    dialog.afterAllClosed
      .subscribe(() => {
        this.getClientList();
        }
    );
    dialogRef.backdropClick()
      .subscribe(() => {
          this.openSaveConfirmationModal();
        }
      );
  }

openSaveConfirmationModal() {
    let confirmationDialog: ConfirmationDialogComponent = new ConfirmationDialogComponent(this.dialog);
    let confirmationDialogData: ConfirmationDialogData = {
      title: "Unsaved Changes",
      body: "Would you like to save your changes before leaving this page?",
      confirmbuttontext: "Save Changes",
      declinebuttontext: "Cancel Changes"
    };
    confirmationDialog.templateData = confirmationDialogData;
    confirmationDialog.confirm.subscribe(() => {
      saveChanges();
    });
    confirmationDialog.decline.subscribe(() => {
      closeConfirmationDialog();
    });
    confirmationDialog.openDialog();
  }

组件 #2

import { Component, Inject, Optional, OnInit } from "@angular/core";
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";


@Component({
  selector: "edit-client-user",
  templateUrl: "./edit-client-user.component.html",
  styleUrls: ["./edit-client-user.component.css"]
})

export class EditClientUserComponent implements OnInit {

  constructor( @Optional() @Inject(MD_DIALOG_DATA), 
    private dialogRef: MdDialogRef<EditClientUserComponent>) {
  }

Answer 1

这个问题的答案是创建一个服务并使用一个事件发射器来让服务知道背景何时被点击，然后服务可以告诉组件 #2 这发生了。下面的代码被添加到组件#1，这是触发对话框打开的地方。现在的问题是 backdropClick 似乎在 Chrome 中有效，但在 IE 或 Edge 中无效!!!!

dialogRef.backdropClick()
      .subscribe(() => {
          this.testService.testEvent.emit(true);
        }
      );