Блог

В настоящее время я пытаюсь научиться программированию и Angular, создав для себя небольшое приложение. В моем приложении я создал службу-оболочку для модального каталога Angular Material. Мое приложение представляет собой гибрид 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 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

Я не вижу инструкции return из вашего openWarningWindow. Я подозреваю, что это может быть так:

 openWarningWindow(warning) {

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

}