如何创建与Angular 4兼容的模式弹出框

Question

我希望能够创建一个弹出窗口，当选择单选按钮时，该窗口将加载我的某个Angular 4组件。

看来，在答案中列出这一question方法只与角2

兼容我不知道从哪里开始，并希望得到任何帮助！

Answer 1

检查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>) {} 
} 

Answer 2

接受的答案增加了一个大的依赖性扑打一只苍蝇。模态（和非模态）对话框很大程度上是一个或两个CSS类的结果。试试这个“重命名...”的例子：

1）编写父母和孩子模态，好像孩子根本不是模态的，而只是一个带* ngIf的内联形式。

<div> 
    A div for {{name}}. 
    <button type="button" (click)="showModal()">Rename</button> 
    <my-modal *ngIf="showIt" [oldname]="name" (close)="closeModal($event)"></my-modal> 
</div> 

父类：使用<my-modal>孩子

父HTML。为简洁起见，省略了@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）使用modal和overlay在孩子HTML。

<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()方法可以接受回调或按照口味返回承诺。

两件事情知道：如果有上<my-modal>的* ngIf

this.renameModal.show(..);将无法​​正常工作，因为它不存在暴露开始与功能。 * ngIf删除整个组件，show（）函数和全部，因此，如果您出于某种原因需要此操作，请使用[hidden]。

modals-on-modals将有z-index问题，因为它们都共享相同的z-index。这可以用[style.z-index]="calculatedValue"或类似的方法解决。