如何在angular4中打开多个对话框

Question

我正在处理一个 angular4 项目，我需要一个接一个地打开对话框。我正在使用该材料来集成对话框。现在单个对话框运行良好，但我想在第一个对话框仍然打开时打开第二个对话框，如果我关闭第二个对话框，我应该会看到第一个。

我已经使用这篇文章完成了对话框：- https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41

是否有任何指导方针或方法可以做到这一点。任何帮助都是可观的。

app.component.html:-

<button (click)="dialogBox()"> Open first dialog box </button>

app.component.ts:-

import { Component, OnInit} from '@angular/core';
import { PopupService } from './Popup.service';

@Component({
   selector: 'app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

   popupResponse:any;
   constructor( private popupService : PopupService)
   {}

   ngOnInit() {}

   public dialogBox()
   {
      this.popupService.dialog().
         subscribe(res => {this.popupResponse = res},
                   err => console.log(err),
                   ()  => console.log(this.popupResponse)
                  );
   } 
}

Popup.service.ts:-

import { Injectable } from '@angular/core';
import { Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material';
import { PopupComponent } from './popup.component';

@Injectable()
export class PopupService {

   constructor(private http: Http, private dialog: MdDialog) { }

   dialog()
   {
      let dialogOpen: MdDialogRef<PopupComponent>;
      dialogOpen = this.dialog.open(PopupComponent);

      return dialogOpen.afterClosed();
   }
}

popup.component.ts:-

import { Component, OnInit} from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.scss']
})
export class PopupComponent implements OnInit {
   constructor(public dialogRef: MdDialogRef<TeamMembersPopupComponent>)
   {}

   ngOnInit() {}

   secondDialogBox() {

   }
}

popup.component.html:-

<div>
   <div>
      <span class="material-icons" (click)="dialogRef.close()">clear</span>
   </div>
   <div>
      <h2> Popup </h2>
      <button (click)="secondDialogBox()"> Second dialog box </button>
   </div>
</div>

如何打开第二个对话框，但第一个对话框没有关闭。

Answer 1

我只是尝试了他们的 plunker，如果您将打开的对话框 2 移动到您的第一个对话框主体中，它可以工作.... 或者我错过了一些东西

<div class="col-md-6 col-md-offset-3">
    <h1>Home</h1>
    <p>{{bodyText}}</p>
    <button (click)="openModal('custom-modal-1')">Open Modal 1</button>

</div>

<modal id="custom-modal-1">
    <div class="modal">
        <div class="modal-body">
            <h1>A Custom Modal!</h1>
            <p>
                Home page text: <input type="text" [(ngModel)]="bodyText" />
            </p>
            <button (click)="openModal('custom-modal-2')">Open Modal 2</button>
            <button (click)="closeModal('custom-modal-1');">Close</button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

<modal id="custom-modal-2">
    <div class="modal">
        <div class="modal-body" style="height:80px; background-color: red;">
            <h1>A Tall Custom Modal!</h1>
            <button (click)="closeModal('custom-modal-2');">Close</button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>