Kotak dialog tidak pernah menarik minat saya pada proyek sampingan pengembangan web terbatas saya sebelumnya, fakta bahwa saya belum pernah melihat penggunaannya adalah salah satu alasannya dan selalu ada panggilan yang dapat diandalkan untuk Alert, yang melakukan pekerjaan yang saya perlukan. Kotak modal Bootstrap menarik tetapi saya tidak punya waktu untuk benar-benar mendalaminya. Kemudian tibalah kesempatan untuk mempelajari Angular.
Saya telah bermain dengan Angular dan Angular Material selama hampir 2 bulan. Baru bulan lalu, mereka benar-benar merusak saya dengan memecahkan beberapa kode saya pada rilis terbarunya. Jangan mulai menyebutkan fleksibilitas, sepertinya saya tidak bisa memahaminya. Namun ada satu hal tentang kerangka ini yang Anda sukai dan benci. Pertama, penerapan Kotak Dialog Material Sudut mudah dipahami.
Saya telah bekerja selama bertahun-tahun dengan mengandalkan Kotak Pesan Windows untuk memperingatkan apa saja. Panggilan sederhana dan hasil yang mudah didapat. Berikut kode C# untuk menampilkan kotak pesan.
string message = "Do you want to abort this operation?";
string title = "Close Window";
MessageBoxButtons buttons = MessageBoxButtons.AbortRetryIgnore;
DialogResult result = MessageBox.Show(message, title, buttons,
MessageBoxIcon.Warning);
Oh, saya rindu hari WinForms, tetapi segalanya harus terus berjalan. Jadi, saya mencoba meniru gaya panggilan di Angular untuk menampilkan kotak Peringatan khusus. Ini contoh panggilan saya untuk menampilkan kotak peringatan.
MessageBox.show(this.dialog, this.message, this.title,
this.information, this.button,
this.allow_outside_click, this.style,
this.width)
.subscribe( result => {
console.log(result);
});
MessageBox.show(this.dialog, `The result is : ${response}`);
MessageBox.show(this.dialog, `Hello, World!`);
Inilah implementasi saya. Ini mungkin bukan pendekatan yang paling elegan atau efisien, tetapi ini memberikan apa yang saya butuhkan. Omong-omong, kode sumbernya tersedia di GitHub
Komponen
Saya membuat satu komponen untuk UI MessageBox. Ini memiliki dua gaya yang tersedia: Penuh dan Sederhana. Elemen UI diilustrasikan di bawah ini.
Opsi Konfigurasi:
- Judul — Menampilkan teks di bilah judul dialog. Defaultnya adalah “Peringatan”, jika tidak disediakan. Bilah judul hanya ditampilkan bila gaya diatur ke "Penuh".
- Pesan — Pesan utama yang akan ditampilkan kepada pengguna.
- Informasi — Informasi tambahan opsional untuk ditampilkan.
- Tombol — Jenis tombol yang akan ditampilkan. Saat ini, hanya mendukung yang berikut ini: OK, OK/CANCEL, YES/NO, ACCEPT/REJECT.
- Izinkan Klik Di Luar Untuk Menutup — Mengizinkan pengguna cukup mengeklik wilayah mana pun di layar di luar kotak dialog untuk menutupnya. Secara default, pengguna perlu mengklik tombol untuk memulai penutupan.
- Style — Mendefinisikan gaya untuk kotak dialog. Ini mendukung dua gaya: Penuh dan Sederhana.
- Lebar — Lebar kotak dialog.
Komponen DialogBox tidak memiliki logika kompleks di belakangnya. Ini dirancang untuk menampilkan pesan dan mengembalikan respons pengguna. Saat pengguna mengklik tombol, tutup UI dan kembalikan hasilnya.
onOk() {
this.dialogRef.close({result: "ok"});
}
onCancel() {
this.dialogRef.close({result: "cancel"});
}
Kelas Statis MessageBox
Saya menggunakan kelas statis untuk meniru panggilan C#. Sebuah layanan pasti merupakan implementasi yang lebih baik tetapi saya memilih yang lebih sederhana. Satu-satunya masalah yang saya alami dengan pendekatan ini adalah kelas statis tidak dapat memanfaatkan Injeksi Ketergantungan, oleh karena itu, Anda akan melihat bahwa saya harus meneruskan objek MatDialog sebagai parameter.
export class MessageBox {
static show(dialog: MatDialog, message, title = "Alert",
information = "", button = 0,
allow_outside_click = false,
style = 0, width = "200px") {
const dialogRef = dialog.open( SimpleDialogComponent, {
data: {
title: title || "Alert",
message: message,
information: information,
button: button || 0,
style: style || 0,
allow_outside_click: allow_outside_click || false
},
width: width
});
return dialogRef.afterClosed();
}
}
Perhatikan bahwa respons dikembalikan sebagai Observable. Konsumen kelas ini perlu berlangganan untuk mendapatkan respon yang sebenarnya.
Layanan Pesan
Dalam beberapa kasus, aplikasi saya memerlukan layanan pesan untuk mengaktifkan kotak dialog saya. Ini biasanya digunakan untuk menampilkan pesan sebagai hasil selesainya suatu proses dari layanan lain. Berikut adalah layanan pesan sederhana untuk melakukan pekerjaan itu.
@Injectable()
export class MessageService {
private message = new Subject<any>();
constructor() { }
// the type can be used in case you want to classify the alert
sendMessage(message: string, type = 1) {
this.message.next({text: message, type: type});
}
getMessage(): Observable<any> {
return this.message.asObservable();
}
clearMessage() {
this.message.next();
}
}
Cara Menggunakan Kotak Pesan
Kami cukup memanggil metode MessageBox.show() langsung pada kode Anda.
MessageBox.show(this.dialog, this.message, this.title,
this.information, this.button,
this.allow_outside_click, this.style,
this.width)
.subscribe( result => {
console.log(result);
});
Atau, jika Anda ingin menggunakan layanan pesan.
onSendService() {
this.messageService.sendMessage(this.message);
}
Pastikan Anda telah berlangganan layanan ini.
this.subscriber = this.messageService.getMessage()
.subscribe(message => {
MessageBox.show(this.dialog, message.text);
});
Jika Anda memiliki komentar atau saran tentang solusinya, silakan tekan kotak komentar. Selamat membuat kode!
Postingan ini diperbarui 11 Desember 2017 untuk menambahkan implementasi layanan pesan.
Artikel ini juga diposting di blog pribadi saya.
Jika postingan ini membantu Anda, silakan klik tombol tepuk 👏 di bawah beberapa kali untuk menunjukkan dukungan Anda!
