Как я могу получить массив, расположенный в другом компоненте?(template, * 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)Я хотел бы повторно использовать Компонент галереи в шаблоне, открывающемся в модальном / диалоговом окне (Angular Material Dialog).

@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) {
  }

Теперь для вас есть сложная часть, потому что обычно вы не используете Компонент внутри и снаружипокадрово.Однако вы можете добиться этого, пометив поля как необязательные и проверив их на пустые перед использованием

  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