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，这是触发对话框打开的位置。现在的问题是，backgroundClick似乎可以在Chrome中运行，但不适用于IE或Edge !!!!

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

订阅Angular Material Dialog的可观察量？

1 个答案: