检查Angular Material Dialogue，这是Plunker
import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
@Component({
selector: 'dialog-result-example',
templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
selectedOption: string;
constructor(public dialog: MdDialog) {}
openDialog() {
let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
}
}
@Component({
selector: 'dialog-result-example-dialog',
templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}
接受的答案增加了一个很大的依赖性来拍打苍蝇。模态（和无模式）对话框主要是一两个CSS类的结果。试试这个“重命名......”示例：
1）写出父和子模态，好像孩子根本不是模态的，而只是附加* ngIf的内联形式。
使用<my-modal>子的父HTML：
<div>
A div for {{name}}.
<button type="button" (click)="showModal()">Rename</button>
<my-modal *ngIf="showIt" [oldname]="name" (close)="closeModal($event)"></my-modal>
</div>
家长班。为简洁省略了@Component装饰器。 （name属性属于父类，即使我们没有表单来改变它，也会存在。）
export class AppComponent {
name = "old name";
showIt = false;
showModal() {
this.showIt = true;
}
closeModal(newName: string) {
this.showIt = false;
if (newName) this.name = newName;
}
}
儿童待模态组件。 @Component装饰和再次导入省略。
export class MyModalComponent {
@Input() oldname = "";
@Output() close = new EventEmitter<string>();
newname = "";
ngOnInit() {
// copy all inputs to avoid polluting them
this.newname = this.oldname;
}
ok() {
this.close.emit(this.newname);
}
cancel() {
this.close.emit(null);
}
}
模态化之前的子HTML。
<div>
Rename {{oldname}}
<input type="text" (change)="newname = $event.target.value;" />
<button type="button" (click)="ok()">OK</button>
<button type="button" (click)="cancel()">Cancel</button>
</div>
2）这是儿童的CSS，但它可以放在一个全局样式表中，以便在整个应用程序中重复使用。它是一个名为modal的单一类，用于<div>元素。
.modal {
/* detach from rest of the document */
position: fixed;
/* center */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* ensure in front of rest of page -- increase as needed */
z-index: 1001;
/* visual illusion of being in front -- alter to taste */
box-shadow: rgba(0,0,0,0.4) 10px 10px 4px;
/* visual illusion of being a solid object -- alter to taste */
background-color: lightblue;
border: 5px solid darkblue;
/* visual preference of don't crowd the contents -- alter to taste */
padding: 10px;
}
但是modal CSS类不会阻止与它下面的页面进行交互。 （因此它在技术上创建了一个无模式对话框。）因此，我们在模态下面放置一个overlay来吸收和忽略鼠标活动。 overlay也适用于<div>元素。
.overlay {
/* detach from document */
position: fixed;
/* ensure in front of rest of page except modal */
z-index: 1000;
/* fill screen to catch mice */
top: 0;
left: 0;
width: 9999px;
height: 9999px;
/* dim screen 20% -- alter to taste */
opacity: 0.2;
background-color: black;
}
3）在子HTML中使用modal和overlay。
<div class="modal">
Rename {{oldname}}
<input type="text" (change)="newname = $event.target.value;" />
<button type="button" (click)="ok()">OK</button>
<button type="button" (click)="cancel()">Cancel</button>
</div>
<div class="overlay"></div>
就是这样。基本上2个CSS类，你可以使任何组件成为模态。实际上，只需通过使用ngClass或[class.modal]="showAsModalBoolean"更改CSS类的存在性，您就可以在运行时显示内联组件或模型。
您可以更改此设置，以便子控制显示/隐藏逻辑。将* ngIf，showIt和show（）函数移动到子项中。在父级中添加@ViewChild(MyModalComponent) renameModal: MyModalComponent;然后父级可以命令性地调用this.renameModal.show(this.name);并重新连接初始化并根据需要包含div。
如上所示，子模式可以将信息返回给父母的函数，或者孩子的show()方法可以根据品味接受回调或返回Promise。
要知道的两件事：
如果在this.renameModal.show(..);上有* ngIf，<my-modal>将无法工作，因为它不存在以公开函数开头。 * ngIf删除整个组件，show（）函数和所有，所以如果你出于某种原因需要它，请使用[hidden]。
Modals-on-modals将具有z-index问题，因为它们都共享相同的z-index。这可以用[style.z-index]="calculatedValue"或类似方法解决。