如何創建與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"或類似的方法解決。