Angular Materialダイアログで観測可能に登録する？

Question

私はAngularを初めて使っています。おそらくこれを完全に間違っていると思います。私は観察可能なものを返すbackdropClickイベントを観察しようとしています。そのイベントが発生したら、openSaveConfirmationModal()というメソッドを呼び出したいと思っています。

以下は私の2つのコンポーネントです。コンポーネント＃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); 
     } 
    );