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

我正在Angular 2中开发应用程序，而且对它还相当陌生。我想在点击卡片时显示模式对话框。我已经在我的应用程序中集成了角材料模式弹出窗口，如教程所示。每张卡都有不同的数据，我想在同一个模式弹出窗口中显示这些数据。 我的模态组件是：

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

}

我的卡组件是：

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

我想在被点击的模态上显示卡片的标题和信息

---

如何在模式中将相应的数据传递给卡？

将标题和消息作为参数传递给openDialog方法，例如

html:

根据评论中的问题进行编辑：

快速简单的方法是将消息内容添加为组件的字符串属性，并将其作为参数传递，例如

在组件中：

export class ContentComponent implements OnInit {
    private solutions: Array<Object>;
    public result: any;
    public dialogOneMessage = `<p>Stuff</p><p>More stuff<p><img src=:/photo.jpg" />

html:

---

不过，我并不喜欢这种方法——将大量html作为组件属性并不是一种很好的分离。如果每个自定义对话框都有大量复杂数据，最好为每个对话框创建一个自定义组件，并将自定义组件传递到this.dialog.open，而不是重复使用ConfirmDialog组件。

请添加dialogsService@Dhyey添加了对话服务的代码谢谢。。然而，标题和消息将是太大的文本，并且会有图像。我想知道我应该如何处理这个问题。我理解，使用这种方法，我们必须编写public dialogOneMessage1、public dialogOneMessage2、public dialogOneMessage3等等……使用不同的模式组件而不是重用是有意义的。谢谢如果内容是动态组件，我们如何实现。。。？你能给我个建议吗。

<button md-button class="read-more" (click)="openDialog('My special title', dialogOneMessage)">Read More</button>