如何使用單個“模態”對話框組件在Angular 2中顯示不同的數據或消息

Question

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

}

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

我想在被點擊的模態上顯示卡的標題和消息。

如何在Modal中將數據分別傳遞給卡？

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組件。