Hoe geef je gegevens door aan een dialoog van hoekig materiaal 2

Ik gebruik dialoogvenstervan hoekig materiaal2.

Ik wil gegevens doorgeven aan de geopende component. Hier is hoe ik het dialoogvenster open met een klik op een knop

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

Op de documentatiepagina staat de eigenschap data, maar ik heb MdDialogConfig gecontroleerd in mijn geïnstalleerde pakketten

/**
 * 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;
}

er is geen data-eigenschap in de configuratieklasse.

Hoe krijg ik nu toegang tot die doorgegeven gegevens?

Antwoord 1, autoriteit 100%

Voor de nieuwste versie van het dialoogvenster (Dit is vóór Angular 5, voor 5 zie update hieronder), kun je het volgende doen om gegevens door te geven via de configuratie, wat veel eenvoudiger en schoner is.

Wanneer u het dialoogvenster opent, kunt u dit op deze manier doen door gegevens toe te voegen als een configuratieparameter (negeer gewoon de breedte en hoogte die er zijn ter illustratie):

this.dialogRef = this.dialog.open(someComponent, {
  width: '330px',
  height: '400px',
  data: {
    dataKey: yourData
  }
});

In het onderdeel dat in het dialoogvenster wordt geopend, kunt u het als volgt openen:

import {MD_DIALOG_DATA} from '@angular/material';
import { Inject } from '@angular/core';
constructor(
   @Inject(MD_DIALOG_DATA) public data: any
) { }
ngOnInit() {
  // will log the entire data object
  console.log(this.data)
}

Of je kunt het gebruiken in de sjabloon of op andere manieren, maar je begrijpt het punt.

UPDATE voor Angular 5

Alles in het materiaal is gewijzigd van Md naar Mat, dus als op Angular 5, importeer zoals:

import {MAT_DIALOG_DATA} from '@angular/material'

Injecteer vervolgens zoals

@Inject(MAT_DIALOG_DATA) public data: any

UPDATE voor Angular 9

MAT_DIALOG_DATA importlocatie is gewijzigd in:

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

Antwoord 2, autoriteit 14%

UPDATE 2 (hoek 5+)

Dit antwoord is nogal achterhaald. Bekijk in plaats daarvan het antwoord van epiphanatic.

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

...
@Component({
  ...
})
export class DialogComponent {
   public name: string;
   ...
}

De onderstaande tekst is niet geldig in nieuwere versies van @angular/material

Ik heb hier geen documentatie over gevonden, dus ben ik ook in de broncode gaan zoeken. Daarom is dit misschien niet de officiële manier om het te doen.

let name = dialogRef._containerInstance.dialogConfig.data.name;
console.log(name); // Sunil

Antwoord 3, autoriteit 12%

Ik dacht dat ik een vollediger antwoord zou geven voor degenen onder ons die nog aan het leren zijn:

In tegenstelling tot de materiële voorbeelden heb ik het dialoogvenster zo geconfigureerd dat het zijn eigen componentbestanden heeft (html, css en ts) voor eenvoudig debuggen.

Hoofdcomponentenbestand “x.component.ts” (de dialoog aanroepen)

1) voeg de importverklaring toe

import { MatDialog} from '@angular/material';

2) voeg de eigenschap toe aan de constructorparameters

public dialog: MatDialog

3) definieer de code om het dialoogvenster op te roepen

 openDialog(title: string, text: string): void {
const dialogRef = this.dialog.open(DialogComponent, {
  width: '350px',
  data: {dialogTitle: title, dialogText: text}
);
dialogRef.afterClosed().subscribe(result => {
});
  const dialogSubmitSubscription = 
  dialogRef.componentInstance.submitClicked.subscribe(result => {
  dialogSubmitSubscription.unsubscribe();
});

}

Roep de functie aan vanuit je html-bestand met openDialog(). Ik verwijs naar DialogComponent, dus zorg ervoor dat het in uw module wordt geïmporteerd.

import { DialogComponent } from './dialog/dialog.component';

ook

entryComponents: [DialogComponent]

declareer het in uw entryComponents-array

4) in uw dialog.component.ts-bestand, voeg de imports toe

import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

5) definieer de eigenschappen & functies

dialogTitle: string;
dialogText: string;
@Output() submitClicked = new EventEmitter<any>();
  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
  ngOnInit() {
    this.dialogTitle = this.data.dialogTitle;
    this.dialogText = this.data.dialogText;
  }
  saveMessage() {
    const data = 'Your data';
    this.submitClicked.emit(data);
    this.dialogRef.close();
  }
  closeDialog() {
    this.dialogRef.close();
  }

6) en als laatste de HTML

<h1 mat-dialog-title>{{dialogTitle}}"</h1>
<div mat-dialog-content>
  <p>{{dialogText}}</p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="saveMessage()" >Ok</button>
  <button mat-button (click)="closeDialog()" cdkFocusInitial>No Thanks</button>
</div>

Ik hoop dat het helpt.

Antwoord 4

Voor iedereen die dit voor hoek 10 of 11 vindt, het enige verschil is dat je gebruikt:

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

in plaats van:

import {MAT_DIALOG_DATA } from '@angular/material';

Officiële pagina is hier.

Antwoord 5

Dus ik heb de methode toegevoegd en het werkt aan één onderdeel, maar als ik een dialoogvenster wil maken (een ander onderdeel), werkt het niet

component van de tabel en verwijderknop

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

Dialoogvenster Component

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

Antwoord 6

Als je dialoogvensters voor HTTP-gegevens gebruikt, onthoud dan dat RxJS en Observables perfect zijn voor dit probleem.

Dialoogservice:

   private _dialogDataSubj$ = new Subject<DialogData>();
    dialogData$ = this._dialogDataSubj$.asObservable()
    setDialogData(data: DialogData) {
        this._dialogDataSubj$.next(data)
    }

In dialoog HTML:

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

Ik weet niet zeker of ik de enige ben, maar ik kon de gegevens in mijn materiële dialoog niet bijwerken met alleen de dialooggegevensverwijzing (@Inject), bijv.: dialogRef.data = newData.