如何获得位于其他组件中的数组？ （模板，* ngComponentOutlet和AngularMaterialDialog）

Question

角度7，角度材料7

GalleryComponent，其中列出了图像，用户可以选择其中的一些：

@Component({
  selector: 'app-gallery',
  template: `

    <mat-card *ngFor="let file of files" (click)="toggleSelect(file)">
      <img mat-card-image [src]="file.url">
    </mat-card>

  `
})
export class GalleryComponent {
  selected: Array<FileDetails> = [];
  files: Array<FileDetails> = [{url: 'someurl1'}, {url: 'someurl2'}];

  toggleSelect(file: FileDetails): void {
    const indexInArray = this.selected.findIndex(f => f === file);
    indexInArray !== -1 ? this.selected.splice(indexInArray, 1) : this.selected.push(file);
  }
}

在另一个组件（PartnersEditTableComponent）中，我想在模板中重复使用Gallery组件，并在模式/对话框（“角度材质”对话框）中打开。

@Component({
  selector: 'app-partners-edit-table',
  template: `

    <button mat-icon-button (click)="openGallery()">
      <mat-icon>collections</mat-icon>
    </button>

    <ng-template #galleryModal>
      <h2 mat-dialog-title>Gallery</h2>
      <mat-dialog-content>
        <ng-container *ngComponentOutlet="GalleryComponent"></ng-container>
      </mat-dialog-content>
      <mat-dialog-actions align="end">
        <button mat-raised-button [mat-dialog-close]="false">Close</button>
        <button mat-raised-button color="primary" [mat-dialog-close]="GalleryComponent.selected">Select</button>
      </mat-dialog-actions>
    </ng-template>

  `
})
export class PartnersEditTableComponent {
  @ViewChild('galleryModal') private readonly galleryModal;
  GalleryComponent = GalleryComponent;

  constructor(private matDialog: MatDialog) {
  }

  openGallery(): void {
    this.matDialog.open(this.galleryModal).afterClosed().subscribe((selectedItems) => {
      if (selectedItems) {
        // do something with selectedItems array
      }
    });
  }
}

如果用户单击对话框上的“选择”按钮，我想获得“选定”数组，例如：

[mat-dialog-close]="GalleryComponent.selected"

->

this.matDialog.open(this.galleryModal).afterClosed().subscribe((selectedItems) => {
  if (selectedItems) {
    // do something with selectedItems array
  }
});

这有可能做到吗？

Answer 1

您可以使用以下对话框传递来自对话框引用的数据

this.dialogRef.close("YOUR_DATA");

或在HTML内使用

  <button mat-button [mat-dialog-close]="'YOUR_DATA'">Ok</button>

但是，这意味着您的GalleryComponent需要知道它是MatDialog。

您可以通过注入

来完成此操作

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData | any) {
  }

现在为您提供了一个棘手的部分，因为通常您不使用模态内部和外部的Component。但是，您可以通过将字段标记为可选字段并在使用前检查它们是否为空来实现此目的

  constructor(
    @Optional() public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: DialogData | any) {
  }

  onNoClick(): void {
    if (this.dialogRef)
      this.dialogRef.close("Stefan");
  }

您可以在此处找到一个有效的示例：https://stackblitz.com/edit/angular-uy8uwe