Comment passer des données à la boîte de dialogue de angular matériau 2

Question

J'utilise boîte de dialogue sur angular material2.

Je souhaite transmettre des données au composant ouvert. Voici comment j'ouvre la boîte de dialogue en cliquant sur un bouton

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
            data :{'name':'Sunil'}
        });

Sur la page de documentation, il y a une propriété de données, mais j'ai vérifié MdDialogConfig dans mes packages installés

/**
 * Configuration for opening a modal dialog with the MdDialog service.
 */
export declare class MdDialogConfig {
    viewContainerRef?: ViewContainerRef;
    /** The ARIA role of the dialog element. */
    role?: DialogRole;
    /** Whether the user can use escape or clicking outside to close a modal. */
    disableClose?: boolean;
    /** Width of the dialog. */
    width?: string;
    /** Height of the dialog. */
    height?: string;
    /** Position overrides. */
    position?: DialogPosition;
}

il n'y a pas de propriété de données dans la classe de configuration.

Maintenant, comment puis-je accéder aux données transmises?

Answer 1

J'ai donc ajouté la méthode et ça marche sur un composant mais si je veux faire une boite de dialogue (un autre composant), ça ne marche pas

composant du tableau et bouton de suppression

  openDeleteDialog(user) {
    this.dialog.open(DeleteUserDialogComponent, {
      width: '30%', disableClose: true, data: user
    });
  }

Boîte de dialogue des composants

export class DeleteUserDialogComponent {

  dataSource = new MatTableDataSource();

  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DeleteUserDialogComponent>, private userService: UserService, @Inject(MAT_DIALOG_DATA) public data: any) {}


  deleteUser() {
    this.dataSource.data.splice(this.dataSource.data.indexOf(this.data), 1);
    this.dataSource.data = [...this.dataSource.data];
    console.log(this.dataSource.data);
    console.log(this.data)
  }

  click(): void {
    this.dialogRef.close();
  }
}

Answer 2

Si vous utilisez des boîtes de dialogue pour les données HTTP, n'oubliez pas que RxJS et Observables sont parfaits pour ce problème.

Service de dialogue:

    private _dialogDataSubj$ = new Subject<DialogData>();
    dialogData$ = this._dialogDataSubj$.asObservable()

    setDialogData(data: DialogData) {
        this._dialogDataSubj$.next(data)
    }

Dans la boîte de dialogue HTML:

<ng-container *ngIf="dialogData$ | async as data; else doneTmp">

Je ne sais pas si c'est juste moi, mais je n'ai pas pu mettre à jour les données dans ma boîte de dialogue de matériau avec simplement la référence de données de boîte de dialogue (@Inject), c'est-à-dire: dialogRef.data = newData.