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

Question

我正在研究 Angular 2 中的应用程序，并且对它还很陌生。我想在单击卡片时显示模态对话框。我已按照 this 中的说明在我的应用程序中集成了 Angular Material 模态弹出窗口教程。每张卡都有不同的数据，我想在相同的模式弹出窗口上显示该数据。我的模态组件是:

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

我想在正在单击的模态上显示卡片的标题和消息。

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

Answer 1

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

html:

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

组件:

public openDialog(title: string, message: string) {
    this.dialogsService
      .confirm(title, message)
      .subscribe(res => this.result = res);
  }

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

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

在组件中:

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:

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

不过，我不太喜欢这种方法 - 没有很好地分离具有大量 html 作为组件属性的关注点。如果每个自定义对话框都有大量复杂数据，您最好为每个对话框创建一个自定义组件，并将自定义组件传递给 this.dialog.open()，而不是重用 ConfirmDialog 组件。