html - 嵌套 Mat-dialogBox 关闭问题

我有一个父栅格组件，我从那里打开了第一个对话框，然后从该对话框组件中打开第二个对话框。我想将数据从最后一个对话框传递到我的父栅格组件，同时需要关闭所有对话框，但我无法将数据从第二个对话框传递到第一个对话框，因此在栅格组件中无法获得数据。

有人能帮我解决这个问题吗？我已经尝试了所有的方法，但仍然得到未定义。任何帮助都会很有用。

请查看我下面的代码。

栅格.组件.ts

  openDialogbox(value): void {
    this.emptyTile = value;
    const dialogRef = this.dialog.open(AddNewFlyerComponent, {
      width: '100em',
      height: '50em',
      data: {
        flyerArray: this.flyers,
        emptyPosition: this.emptyTile,
        page: this.flyers[0].Seite,
        year: this.flyers[0].Jahr,
        week: this.flyers[0].KW,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The raster dialog was closed', result);
    });
  }

AddNewFlyer组件.ts

  openDialog(werbenumber): void {
    const dialogRef = this.dialog.open(CreateNewFlyerComponent, {
      width: '100em',
      height: '50em',
      data: {
        flyerArray: this.data.flyerArray,
        werbenumber: werbenumber,
        emptyTile: this.data.emptyPosition,
        page: this.data.page,
        week: this.data.week,
        year: this.data.year
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The 1st dialog was closed', result); // getting undefined
    });
  }

CreateNewFlyerComponent.ts

  addFlyerToEmptyPosition(werbedata: WerbeData) {
    const newFlyer = {
      ArtNr: this.werbedata.ArtNr,
      Filiale: this.werbedata.FILIALE,
      Jahr: this.data.flyerArray[0].Jahr,
      KW: this.data.flyerArray[0].KW,
      Pos: this.data.emptyTile,
      Raster: this.data.flyerArray[0].Raster,
      Seite: this.data.flyerArray[0].Seite,
      WERBE_NR: this.werbedata.WERBE_NR,
      EUR_VK: this.a,
      EUR_VK_Einheit: this.b,
      VK_Einheit: this.c
    };
    this.flyerHammService.createNewFlyer(newFlyer)
      .then(
        (response: any) => {
          this.returnFlyer = response.data[0]; // This returnFlyer, I want to pass
          this.matSnackBar.open('Neuer Flyer wurde erstellt', 'Undo', {
            duration: 3000
          });
        }
      ).catch(
        error => console.log(error)
      );
  }

CreateNewFlyerComponent.ts

  <button mat-dialog-close mat-raised-button [color]="'success'" [mat-dialog-close]="returnFlyer" (click)="addFlyerToEmptyPosition(werbedata)">
    {{ 'SPEICHERN' }}
    <mat-icon>save</mat-icon>
  </button>

答案＃1

对两个对话使用相同的数据对象。不要创建新的对象，而是用额外的数据更新原始数据对象，然后将其传入第二个对话中：

AddNewFlyerComponent.ts

openDialog(werbenumber): void {

  this.data.emptyTile = this.data.emptyPosition; // or was that a typo?
  this.data.werbenumber = werbenumber; // or use Object.defineProperty()

  const dialogRef = this.dialog.open(CreateNewFlyerComponent, {
    width: '100em',
    height: '50em',
    this.data
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The 1st dialog was closed', result); // getting undefined
  });
}

要将数据传回栅格，请使用相同的方法：

栅格.组件.ts

data;

openDialogbox(value): void {
  this.emptyTile = value;
  this.data = {
    flyerArray: this.flyers,
    emptyPosition: this.emptyTile,
    page: this.flyers[0].Seite,
    year: this.flyers[0].Jahr,
    week: this.flyers[0].KW,
  }
  const dialogRef = this.dialog.open(AddNewFlyerComponent, {
    width: '100em',
    height: '50em',
    data: this.data
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The raster dialog was closed', result);
  });
}