程式設計

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

Comments are closed.