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>

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

1 个答案: