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를 이동 .... 아니면 내가하면 뭔가

난 그냥 자신의 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>