如何使用单个模态对话框组件在Angular 2中显示不同的数据或消息

我正在研究Angular 2中的应用程序并且相当新 . 我想在点击卡片时显示模态对话框 . 我按照this教程中的说明在我的应用程序中集成了角度材质模态弹出窗口 . 每个卡都有不同的数据和我希望在同一模态弹出窗口中显示的数据 . 我的模态组件是：

import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from '@angular/material';
@Component({
  selector: 'confirm-dialog',
  template: `
        <p>{{ title }}</p>
        <p>{{ message }}</p>
        <button type="button" md-raised-button 
            (click)="dialogRef.close(true)">OK</button>
        <button type="button" md-button 
            (click)="dialogRef.close()">Cancel</button>
    `,
})
export class ModalComponent {
  public title: string;
  public message: string;

  constructor(public dialogRef: MdDialogRef<ModalComponent>) {

  }

}

我的卡组件是：

import { Component, OnInit } from '@angular/core';
import { ModalService } from '../services/modal.service';
@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  private solutions: Array<Object>;
  public result: any;
  constructor(public dialogsService: ModalService) {

  }
  public openDialog() {
    this.dialogsService
      .confirm('Confirm Dialog', 'Are you sure you want to do this?')
      .subscribe(res => this.result = res);
  }
  ngOnInit() {
  }

}

和HTML是：

<div class="container self-card-container">
  <div class="row lab-work">
    <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
      <div class="custom-card">
        <div class="card-header whatWeDo align-item-center">
          <div class="custom-header-image mat-card-avatar d-flex justify-content-center align-self-center" md-card-avatar="">
            <img src="./assets/what-we-do.png" class="align-self-center">
          </div>
          <div class="custom-header-text d-flex align-self-center">
            <div class="custom-card-title">What We Do</div>
          </div>
        </div>
        <div class="custom-card-content">
          Co-Innovate with customers and partners in a "sandbox" environment to develop proof of concepts. Harness Emerging technologies
          to come up with newer solutions around existing problems. Provide an Immersive Experience to our customers of potential
          solutions for feel and function.
        </div>
        <div class="custom-card-action align-items-center">
          <button md-button class="read-more" (click)="openDialog()">Read More</button>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
      <div class="custom-card">
        <div class="card-header howWeDo align-item-center">
          <div class="custom-header-image mat-card-avatar d-flex justify-content-center align-self-center" md-card-avatar="">
            <img src="./assets/how-we-do.png" class="align-self-center">
          </div>
          <div class="custom-header-text d-flex align-self-center">
            <div class="custom-card-title">How We Do</div>
          </div>
        </div>
        <div class="custom-card-content">
          We begin with problem identification followed by ideation phase to create an alternate point of view on the problem. This
          is followed by building a proof of concept or a prototype which is then handed over to customer for feedback. The
          whole process is repeated iteratively as desired.
        </div>
        <div class="custom-card-action align-items-center">
          <button md-button class="read-more" (click)="openDialog()">Read More</button>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
      <div class="custom-card">
        <div class="card-header howWeDone align-item-center">
          <div class="custom-header-image mat-card-avatar d-flex justify-content-center align-self-center" md-card-avatar="">
            <img src="./assets/how-things-get-done.png" class="align-self-center">
          </div>
          <div class="custom-header-text d-flex align-self-center">
            <div class="custom-card-title">How Things Get Done</div>
          </div>
        </div>
        <div class="custom-card-content">
          We follow 'continuous flow' based development as opposed to traditional software development life-cycle to stay lean. An
          integrated application life cycle management gives us necessary agility and transparency.
        </div>
        <div class="custom-card-action align-items-center">
          <button md-button class="read-more" (click)="openDialog()">Read More</button>
        </div>
      </div>
    </div>
  </div>

对话服务是：

import { Observable } from 'rxjs/Rx';
import { ModalComponent } from '../modal/modal.component';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
import { Injectable } from '@angular/core';

@Injectable()
export class ModalService {

  constructor(private dialog: MdDialog) { }
  public confirm(title: string, message: string): Observable<boolean> {

    let dialogRef: MdDialogRef<ModalComponent>;

    dialogRef = this.dialog.open(ModalComponent);
    dialogRef.componentInstance.title = title;
    dialogRef.componentInstance.message = message;

    return dialogRef.afterClosed();
  }
}

我想在点击的模态上显示卡片的 Headers 和信息 .

如何在Modal中将数据分别传递给卡？