Wie öffne ich mehrere Dialogfelder in angular4

Question

Ich arbeite an einem angular4-Projekt, wo ich Dialogfelder nacheinander öffnen muss. Ich verwende das Material, um Dialogfelder zu integrieren. Momentan funktioniert ein einzelnes Dialogfeld gut, aber ich möchte ein zweites Dialogfeld öffnen, während das erste noch offen ist und wenn ich das zweite schließe, sollte ich das erste sehen.

Ich habe Dialogfeld mit diesem Artikel gemacht: - https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41

Gibt es eine Richtlinie oder eine Methode, dies zu tun. Jede Hilfe ist spürbar.

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> 

Wie zweites Dialogfeld zu öffnen, aber erstes Dialogfeld nicht in der Nähe ist.

Answer 1

ich habe gerade versucht, ihre Plunker, wenn Sie das offene Dialogfeld 2 in Ihrem ersten Dialogfeld Körper zu bewegen, seine Arbeits .... oder ich etwas fehlt

<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>