Übergeben Sie ein Objekt auf einen Winkel Material2 Dialog

Question

Also, ich habe eine Komponente, wo ich meine Ereignisliste haben, die wie folgt aussieht:

eventi.component.ts

@Component({ 
    selector: 'my-eventi', 
    templateUrl: './eventi.component.html', 
}) 
export class EventiComponent implements OnInit { 
    soonEvents: Eventi[]; 
    data: Date; 
    i: number; 

    evtdlg: EventDialog; 

    constructor(private eventiService: EventiService, public dialog: MdDialog) { } 

    ngOnInit() { 
     this.eventiService 
      .getFutureEvents() 
      .then((futureEvents: Eventi[]) => { 
       this.futureEvents = futureEvents.map((futureEvents) => { 
        return futureEvents; 
       }); 
      }); 
    } 

    openEventDialog(event: Eventi) { 
     this.dialog.closeAll(); 
     this.dialog.open(EventDialog); 
    } 
} 

Und seine html: eventi.component.html

<div class="col s8 m8 l5 offset-s2 offset-m2" *ngFor="let event of soonEvents"> 
    <a (click)="openEventDialog()"> <-- The dialog has to display this card's event 
     <md-card class="card"> 
      <img md-card-image src="../assets/icons/events/evento2801-min.jpeg"> 
      <md-card-content> 
      <span class="card-title grey-text-text-darken-4"> 
       {{event.nome}} 
       <a (click)="openEventDialog(event)"> 
        <button md-mini-fab class="light-blue accent-1 right white-text"> 
         <md-icon>add</md-icon> 
        </button> 
       </a> 
      </span> 
      <p class="left-align card-date">{{event.data | date:'dd/MM/yyyy'}}</p> 
      </md-card-content> 
     </md-card> 
    </a> 
</div> 

dialog component

@Component({ 
    selector: 'event-dialog', 
    template:` 
     <div class="info"> 
      <img class="dialog-evento" src="../assets/icons//events/evento2801.jpeg"> 
      <div class="floatr"> 
       <h3>{{event.nome}}</h3> 
       <p class="des-evento">{{event.data | date:'dd/MM/yyyy'}}</p> 
       <p class="des-evento">Dalle {{event.oraInizio}}<p> 
       <p class="des-evento">Presso {{event.luogo}}</p> 
      </div> 
     </div> 
     <div class="descrizione"> 
      <span> 
       {{event.descrizione}} 
      </span> 
     </div> 
    ` 
}) 
export class EventDialog { } 

Wenn ich meinen Dialog öffne, möchte ich die Eigenschaften des gleichen Ereignisses der Karte sehen, auf die ich geklickt habe. Gibt es eine Möglichkeit, dies zu tun?

Answer 1

können Sie

dialogRef.componentInstance.myProperty = 'some data' 

verwenden, um die Daten auf Ihrer Komponente zu setzen. Hier

ist die Antwort

How to pass data to dialog of angular material 2