angular4で複数のダイアログボックスを開く方法

Question

私は、ダイアログボックスを次々と開く必要があるangular4プロジェクトに取り組んでいます。私はこの資料を使ってダイアログボックスを統合しています。今は単一のダイアログボックスがうまくいきますが、最初のダイアログボックスが開いている間に2番目のダイアログボックスを開き、2番目のダイアログボックスを閉じると最初のダイアログボックスが表示されます。

私はこの記事を使用してダイアログボックスを行っている： - 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> 

2番目のダイアログボックスが、最初のダイアログボックスを開く方法は近くありません。

Answer 1

場合、私はちょうど、そのplunkerを試してみました、あなたの最初のダイアログボックス本体の内側に開いているダイアログボックス2を移動する場合、私はちょうど、その作業を自分plunkerを試してみました....または私は

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