記一個(gè)angular在路由配置中管理 Angular Material Dialog（完成動態(tài)組件的彈窗顯現(xiàn)）
Netty+SpringBoot 開發(fā)即時(shí)通訊系統(tǒng)

download：https://www.zxit666.com/5771/

背景描繪
目的
我們的目的正如標(biāo)題所言：在路由配置中管理 Angular Material Dialog，從而更煩瑣（代碼量更少，可復(fù)用性，可拓展性、可維護(hù)性更強(qiáng)）地完成動態(tài)組件的彈窗顯現(xiàn)。不難看出，我們的目的由兩個(gè)局部組成，動態(tài)組件和彈窗。其實(shí)二者的單獨(dú)完成都并不艱難，angular官網(wǎng)所引薦的眾多UI庫中都有二者對應(yīng)的demo。但是，要將二者強(qiáng)健地分離起來并不是一件容易的事情。

我曾經(jīng)嘗試過兩種計(jì)劃：一是bootstrap->model完成彈窗+Material->Cdk->Portal完成動態(tài)組件；二是Material->Dialog完成彈窗+向openDialog()辦法中傳參數(shù)以控制要加載的組件完成動態(tài)組件。對兩種計(jì)劃經(jīng)過嘗試后會發(fā)現(xiàn)，兩個(gè)計(jì)劃都有問題且大同小異：對運(yùn)用的組件（C層、V層）代碼侵入過多，且局部代碼需求屢次復(fù)寫，這關(guān)于開發(fā)而言并不是好的現(xiàn)象。

后來經(jīng)過教師引導(dǎo)，最終發(fā)現(xiàn)以路由配置去管理Material Dialog完成動態(tài)組件彈窗顯現(xiàn)的計(jì)劃更為適宜。這就是我們下面所要研討的。

Material Dialog運(yùn)用辦法
首先我們需求對Material->Dialog根底的運(yùn)用辦法有一定的理解

如何完成以路由配置去管理
完成思緒
首先我們要了解好官方提供的dialog的經(jīng)典用法，經(jīng)察看和研討后我們能夠看出它的大致運(yùn)作流程，如下圖：
image.png
此流程中呈現(xiàn)上述問題的中央主要集中在第三步驟。由于openDialog()辦法是直接寫在組件C層中的，這就招致代碼入侵這個(gè)問題無法防止。而假使以向辦法中傳參數(shù)來控制要加載的組件完成動態(tài)組件的方式，這無疑會讓本就侵入的代碼質(zhì)變得更多了，而且還有局部代碼需求屢次復(fù)寫；最最讓人受不了的還是：每個(gè)想要這樣用的組件，都得來上這么一套，真實(shí)折磨。所以如今問題進(jìn)一步轉(zhuǎn)化成了：如何在Material->Dialog經(jīng)典用法的根底上，將本來需求寫在組件C層中的openDialog()辦法抽離出來，變得可復(fù)用，易維護(hù)。

經(jīng)教師指導(dǎo)和上網(wǎng)查閱材料，最終以路由配置去管理的方式完成了我們想要的效果，再回過頭來總結(jié)它詳細(xì)的完成思緒：V層button不再直接綁定openDialog()辦法，而是綁定路由(routerLink)且要加上路由內(nèi)容輸出語句(<router-outlet>)；在routing.module文件中給所綁定子路由的component設(shè)置為DialogEntryComponent（翻譯過來為彈窗入口組件，沒錯這是我們新建的dialog-entry.component.ts文件，這時(shí)分需求將openDialog()辦法及其他相關(guān)辦法從原組件C層中移動到這里面來，這樣原組件C層將不會呈現(xiàn)代碼侵入的問題）；然后在routing.module文件中給所綁定路由的data中設(shè)置component:你想要彈出組件。詳細(xì)流程如下圖：
image.png
這樣做，將完成彈窗的效果的openDialog()辦法及其他相關(guān)辦法抽離到DialogEntryComponent中；將組件的動態(tài)渲染交由路由文件中向DialogEntryComponent傳入目的組件來完成。圓滿處理了上文中提到的一系列問題。

代碼完成
文件目錄準(zhǔn)備：1.Term目錄下需求有term-index組件，term-add組件，term-edit組件，每個(gè)組件中都有C層、V層、CSS文件、測試文件；還需求有term.module.ts、term-routing.module.ts文件。2.dialog-entry目錄下需求有dialog-entry.component.ts、dialog-entry.module.ts文件。

term-index的C層什么都不需求
term-index的V層

term-edit的C層與term-add的根本相同
只需將結(jié)構(gòu)函數(shù)中MatDialogRef<>填入本人的組件即可。

term-edit的V層與term-add的根本相同
只需將h1標(biāo)簽中填入可辨識此組件的內(nèi)容即可。

總結(jié)
至此，我們的目的終于達(dá)成了，之后其他模塊想要復(fù)用的話，只需求做以下3項(xiàng)工作即可：
1.在module文件中importers我們的DialogEntryModule；
2.給主組件的V層button中綁定轉(zhuǎn)跳的路由信息；
3.在routing.module文件中設(shè)置對應(yīng)路由所要轉(zhuǎn)跳的組件。

眾所周知，第2第3步工作就算不運(yùn)用動態(tài)組件彈窗也是無法防止的。而像本文這般配置好后，之后其他模塊再想要復(fù)用時(shí)，多出的工作內(nèi)容只要第1步和第3步中多寫幾行簡單的代碼而已。這就是我們想要的，不用造反復(fù)的輪子，以及能夠在復(fù)用起來輕松而煩瑣。