将对象传递给 Angular Material2 对话框

Question

所以，我有一个组件，我的事件列表如下所示：

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

及其 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 { }

当我打开我的对话框时，我想查看我单击的卡片的同一事件的属性，有没有办法做到这一点？

Answer 1

您可以使用

dialogRef.componentInstance.myProperty = 'some data'

在您的组件上设置数据。

答案在这里

将对象传递给 Angular Material2 对话框

Pass an object to an Angular Material2 Dialog

angular

dialog

angular-material2