Cara membuat modal popup yang kompatibel dengan Angular 4

Jawaban yang diterima menambahkan ketergantungan yang besar untuk menepuk lalat. Dialog modal (dan modeless) sebagian besar merupakan hasil dari satu atau dua kelas CSS. Coba contoh "rename..." ini:

1. Tuliskan induk dan anak-modal seolah-olah anak itu sama sekali bukan modal, tetapi hanya sebuah formulir sebaris dengan *ngIf terpasang.

Induk HTML yang menggunakan `` anak:

<div>
    A div for {{name}}.
    Rename

</div>

Kelas induk. Dekorator @Component dihilangkan untuk mempersingkat. (Properti nama adalah milik kelas induk dan akan tetap ada meskipun kita tidak memiliki form untuk mengubahnya).

export class AppComponent {
    name = "old name";

    showIt = false;
    showModal() {
        this.showIt = true;
    }
    closeModal(newName: string) {
        this.showIt = false;
        if (newName) this.name = newName;
    }

}

Komponen anak yang akan dimodal. Dekorator @Component dan impor lagi dihilangkan.

export class MyModalComponent {
    @Input() oldname = "";
    @Output() close = new EventEmitter();
    newname = "";

    ngOnInit() {
        // copy all inputs to avoid polluting them
        this.newname = this.oldname; 
    }

    ok() {
        this.close.emit(this.newname);
    }

    cancel() {
        this.close.emit(null);
    }
}

Anak HTML sebelum menjadi modal-izing.

<div>
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    OK
    Cancel
</div>

2. Berikut ini adalah CSS untuk child, tetapi dapat ditempatkan di stylesheet global untuk digunakan kembali di seluruh aplikasi Anda. Ini adalah kelas tunggal yang disebut modal dan ditujukan untuk elemen <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;
}

Tetapi kelas CSS modal tidak akan mencegah interaksi dengan halaman di bawahnya. (Jadi secara teknis menciptakan dialog tanpa model.) Jadi kita menempatkan overlay di bawah modal untuk menyerap dan mengabaikan aktivitas mouse. overlay juga ditujukan untuk elemen <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. Gunakan modal dan overlay di dalam child HTML.

<div class="modal">
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    OK
    Cancel
</div>
<div class="overlay"></div>

Dan itu saja. Pada dasarnya 2 kelas CSS dan Anda dapat membuat komponen apa pun menjadi modal. Bahkan Anda dapat menampilkan komponen secara in-line atau sebagai modal pada saat run-time hanya dengan mengubah keberadaan kelas CSS dengan ngClass atau [class.modal]="showAsModalBoolean".

Anda dapat mengubah ini sehingga anak mengontrol logika show/hide. Pindahkan fungsi *ngIf, showIt, dan show() ke dalam child. Di dalam induk tambahkan @ViewChild(MyModalComponent) renameModal: MyModalComponent; dan kemudian induk dapat secara imperatif memanggil this.renameModal.show(this.name); dan re-wire inisialisasi dan div yang mengandung sesuai kebutuhan.

Anak-modal dapat mengembalikan info ke fungsi induk seperti yang ditunjukkan di atas, atau metode show() anak dapat menerima callback atau mengembalikan Promise, sesuai selera.

Dua hal yang perlu diketahui:

this.renameModal.show(..); tidak akan berfungsi jika ada ngIf pada `` karena tidak akan ada fungsi untuk mengekspos fungsi untuk memulai. ngIf akan menghapus seluruh komponen, fungsi show() dan semuanya, jadi gunakan [hidden] sebagai gantinya jika Anda membutuhkan ini untuk beberapa alasan.

Modals-on-modals akan memiliki masalah z-index karena mereka semua berbagi z-index yang sama. Hal ini dapat diatasi dengan [style.z-index]="calculatedValue" atau sejenisnya.

Periksa Dialog Material Sudut, berikut ini adalah 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) {}
}