Netty+SpringBoot 开发即时通讯系统-参差荇菜，左右流之
记一个angular在路由配置中管理 Angular Material Dialog（完成动态组件的弹窗显现）
Netty+SpringBoot 开发即时通讯系统
download：https://www.zxit666.com/5771/
背景描绘
目的
我们的目的正如标题所言：在路由配置中管理 Angular Material Dialog，从而更烦琐（代码量更少，可复用性，可拓展性、可维护性更强）地完成动态组件的弹窗显现。不难看出，我们的目的由两个局部组成，动态组件和弹窗。其实二者的单独完成都并不艰难，angular官网所引荐的众多UI库中都有二者对应的demo。但是，要将二者强健地分离起来并不是一件容易的事情。
我曾经尝试过两种计划：一是bootstrap->model完成弹窗+Material->Cdk->Portal完成动态组件；二是Material->Dialog完成弹窗+向openDialog()办法中传参数以控制要加载的组件完成动态组件。对两种计划经过尝试后会发现，两个计划都有问题且大同小异：对运用的组件（C层、V层）代码侵入过多，且局部代码需求屡次复写，这关于开发而言并不是好的现象。
后来经过教师引导，最终发现以路由配置去管理Material Dialog完成动态组件弹窗显现的计划更为适宜。这就是我们下面所要研讨的。
Material Dialog运用办法
首先我们需求对Material->Dialog根底的运用办法有一定的理解
如何完成以路由配置去管理
完成思绪
首先我们要了解好官方提供的dialog的经典用法，经察看和研讨后我们能够看出它的大致运作流程，如下图：
image.png
此流程中呈现上述问题的中央主要集中在第三步骤。由于openDialog()办法是直接写在组件C层中的，这就招致代码入侵这个问题无法防止。而假使以向办法中传参数来控制要加载的组件完成动态组件的方式，这无疑会让本就侵入的代码质变得更多了，而且还有局部代码需求屡次复写；最最让人受不了的还是：每个想要这样用的组件，都得来上这么一套，真实折磨。所以如今问题进一步转化成了：如何在Material->Dialog经典用法的根底上，将本来需求写在组件C层中的openDialog()办法抽离出来，变得可复用，易维护。
经教师指导和上网查阅材料，最终以路由配置去管理的方式完成了我们想要的效果，再回过头来总结它详细的完成思绪：V层button不再直接绑定openDialog()办法，而是绑定路由(routerLink)且要加上路由内容输出语句(<router-outlet>)；在routing.module文件中给所绑定子路由的component设置为DialogEntryComponent（翻译过来为弹窗入口组件，没错这是我们新建的dialog-entry.component.ts文件，这时分需求将openDialog()办法及其他相关办法从原组件C层中移动到这里面来，这样原组件C层将不会呈现代码侵入的问题）；然后在routing.module文件中给所绑定路由的data中设置component:你想要弹出组件。详细流程如下图：
image.png
这样做，将完成弹窗的效果的openDialog()办法及其他相关办法抽离到DialogEntryComponent中；将组件的动态渲染交由路由文件中向DialogEntryComponent传入目的组件来完成。圆满处理了上文中提到的一系列问题。
代码完成
文件目录准备：1.Term目录下需求有term-index组件，term-add组件，term-edit组件，每个组件中都有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的根本相同
只需将结构函数中MatDialogRef<>填入本人的组件即可。
term-edit的V层与term-add的根本相同
只需将h1标签中填入可辨识此组件的内容即可。
总结
至此，我们的目的终于达成了，之后其他模块想要复用的话，只需求做以下3项工作即可：
1.在module文件中importers我们的DialogEntryModule；
2.给主组件的V层button中绑定转跳的路由信息；
3.在routing.module文件中设置对应路由所要转跳的组件。
众所周知，第2第3步工作就算不运用动态组件弹窗也是无法防止的。而像本文这般配置好后，之后其他模块再想要复用时，多出的工作内容只要第1步和第3步中多写几行简单的代码而已。这就是我们想要的，不用造反复的轮子，以及能够在复用起来轻松而烦琐。
