Question

我有一个父栅格组件，从中我打开第一个对话框，从那个对话框组件中，我打开第二个对话框。我想将数据从上一个对话框传递到我的父栅格，同时需要关闭所有对话框，但是我无法将数据从第二个对话框传递到第一个对话框，因此，我没有在栅格组件中获取数据。

有人可以帮我解决这个问题吗？我试图做所有的事情，但仍然变得不确定。任何形式的帮助都将是很好的。

请找到我下面的代码。

raster.component.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);
    });
  }

AddNewFlyerComponent.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>

Answer 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
  });
}

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

raster.component.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);
  });
}

嵌套Mat-dialogBox关闭问题

1 个答案: