Angular Material 製作程式內彈出視窗缺點
Angular的程式要做得美觀,就要盡量避免使用瀏覽器的alert或confirm,這種時候就需要UI組件提供的Modal元件功能(不是模型的Model)。Angular Material也有所謂的Dialog的功能,這邊講講在實用上的缺點。
使用較為不直觀
Angular Material的Modal,預設是要另外建立一個Standalone的Component,然後在要彈出視窗的畫面用這類的程式碼開啟(以下程式碼來自Angular Material官網):
let dialogRef = dialog.open(UserProfileComponent, {
height: '400px',
width: '600px',
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`); // Pizza!
});
相較於其他的UI組建有些可以直接寫在主要呼叫的頁面中,多了一個元件就多花了一些資源。
共用較為困難
如果有一個對話框是錯誤訊息,設計好樣板,但中間的錯誤訊息會隨著不同的錯誤改變。
那這個做起來變成要用
data: { message: '資料庫連線錯誤' }
來傳遞data到另一個元件,然後那個元件接收data的message以後把message顯示在HTML Template上。
這樣寫共通的彈出視窗就較為麻煩,尤其是如果想要一個視窗又可以是錯誤、成功提示、警告,要很多的判斷在裡面。
元件設計較為困難
要怎樣決定哪幾個彈出視窗要用共通的元件,哪幾個要獨立寫一個元件。這就要考驗程式設計師的智慧了。
而且彈出視窗會有很多重複的代碼,如果要改一個class比如:m-5改成m-4,如果已經有20~30個元件了,就要一個一個找,取代功能沒取代好可能導致爆掉。
傳遞值的問題
如果彈出視窗的代碼和要彈出的位置在同一個元件,傳遞值很好傳遞,因為是共用一個元件的變數。
但這個就有跨元件傳遞值的問題了。
結論
如果覺得以上四點大致上我認為的缺點都不成問題的話,Angular Material的Dialog其實是很值得使用的。
至少我們團隊開發的上一套系統是使用這個。
What's your reaction?
Excited
0
Happy
0
In Love
0
Not Sure
0
Silly
0