Question

我目前正在尝试通过为自己制作一个小应用程序来教自己编码和Angular。在我的应用程序中，我为Angular Material ModalDialog提供了包装服务。我的应用程序是Angular和AngularJS的混合体（我已经为此工作了一段时间）。

包装器服务如下：

export class ModalDialogWrapperService {

  constructor(private dialog: MatDialog, private zone: NgZone) {
  }
  openWarningWindow(warning) {

    this.zone.run(() => {
        const dialogRef = this.dialog.open(WarningComponent, {
          data: warning,
          panelClass: 'dialog--warning'
        });
        dialogRef.afterClosed().subscribe(() => {
          console.log('I need access to this');
        });
    });
  }

这在Angular Component中很棒，我可以通过导入服务并像这样调用方法来提高Modal，这是使用该服务的Component Method：

// component code
public raiseWarning(warning: any): void {
    this.modalDialogWrapperService.openWarningWindow({
      type: warning.type,
      id: warning.id,
      tags: warning.tags
    });
  }

这很好，但是当对话框关闭并带回数据时，我需要访问。我可以在服务中捕获它，请参阅console.log，但无法在组件中访问它。我是否应该在

之类的组件中添加代码

// component code
public raiseWarning(warning: any): void {
    const dialogRef = this.modalDialogWrapperService.openWarningWindow({
      type: warning.type,
      id: warning.id,
      tags: warning.tags
    });

    dialogRef.afterClosed().subscribe(() => {
          console.log('I am in the component');
    });
  }

我收到一个未定义的错误，我的问题是，如何将afterClosed().subscribe从包装服务中暴露给组件。任何意见是极大的赞赏。我需要像这样从服务中return dialogRef吗？

openWarningWindow(warning) {

    this.zone.run(() => {
        // const dialogRef =
        return this.dialog.open(WarningComponent, {
          data: warning,
          panelClass: 'dialog--warning'
        });
    });
  }

我尝试使用修改后的组件代码进行此操作，但是没有用。我收到错误TypeError: Cannot read property 'afterClosed' of undefined

Answer 1

我没有从您的openWarningWindow中看到return语句。我怀疑情况可能是这样的：

openWarningWindow(warning) {

return this.zone.run(() => {
    // const dialogRef =
    return this.dialog.open(WarningComponent, {
      data: warning,
      panelClass: 'dialog--warning'
    });
});

}

如何公开afterClosed（）方法/可从Angular的Modal Wrapper Service中观察到

1 个答案: