背景形容
指标
咱们的指标正如题目所言：在路由配置中治理 Angular Material Dialog，从而更简便（代码量更少，可复用性，可拓展性、可维护性更强）地实现动静组件的弹窗显示。不难看出，咱们的指标由两个局部组成，动静组件和弹窗。其实二者的独自实现都并不艰难，angular官网所举荐的泛滥UI库中都有二者对应的demo。然而，要将二者强壮地联合起来并不是一件容易的事件。
我已经尝试过两种计划：一是bootstrap->model实现弹窗+Material->Cdk->Portal实现动静组件；二是Material->Dialog实现弹窗+向openDialog()办法中传参数以管制要加载的组件实现动静组件。对两种计划通过尝试后会发现，两个计划都有问题且大同小异：对应用的组件（C层、V层）代码侵入过多，且局部代码须要屡次复写，这对于开发而言并不是好的景象。
起初通过老师疏导，最终发现以路由配置去治理Material Dialog实现动静组件弹窗显示的计划更为适合。这就是咱们上面所要钻研的。
Material Dialog应用办法
首先咱们须要对Material->Dialog根底的应用办法有肯定的理解，具体详情请参考官网文档：
https://material.angular.io/components/dialog/overview，在此就不过多赘述。
如何实现以路由配置去治理
实现思路
首先咱们要了解好官网提供的dialog的经典用法，经察看和钻研后咱们能够看出它的大体运作流程，如下图：
此流程中呈现上述问题的中央次要集中在第三步骤。因为openDialog()办法是间接写在组件C层中的，这就导致代码入侵这个问题无奈防止。而假使以向办法中传参数来管制要加载的组件实现动静组件的形式，这无疑会让本就侵入的代码量变得更多了，而且还有局部代码须要屡次复写；最最让人受不了的还是：每个想要这样用的组件，都得来上这么一套，切实折磨。所以当初问题进一步转化成了：如何在Material->Dialog经典用法的根底上，将本来须要写在组件C层中的openDialog()办法抽离进去，变得可复用，易保护。
经老师领导和上网查阅材料，最终以路由配置去治理的形式实现了咱们想要的成果，再回过头来总结它具体的实现思路：V层button不再间接绑定openDialog()办法，而是绑定路由(routerLink)且要加上路由内容输入语句(<router-outlet></router-outlet>)；在routing.module文件中给所绑定子路由的component设置为DialogEntryComponent（翻译过去为弹窗入口组件，没错这是咱们新建的dialog-entry.component.ts文件，这时候须要将openDialog()办法及其他相干办法从原组件C层中移动到这外面来，这样原组件C层将不会呈现代码侵入的问题）；而后在routing.module文件中给所绑定路由的data中设置component:你想要弹出组件。具体流程如下图：
这样做，将实现弹窗的成果的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层
<!--基于Material Dialogs的弹窗显示动静组件demo--><button mat-raised-button routerLink="add">add</button><button mat-raised-button routerLink="edit/3">edit</button><router-outlet></router-outlet>term-add的C层
export class TermAddComponent implements OnInit { constructor( public dialogRef: MatDialogRef<TermAddComponent>, ) {} ngOnInit(): void { } onNoClick(): void { this.dialogRef.close(); } onOkClick(): void { this.dialogRef.close(); }}term-add的V层
<h1 mat-dialog-title>Hi! term-add works</h1><div mat-dialog-actions> <button mat-button (click)="onNoClick()">No Thanks</button> <button mat-button (click)="onOkClick()" cdkFocusInitial>Ok</button></div>term-edit的C层与term-add的基本相同
只需将构造函数中MatDialogRef<>填入本人的组件即可。
term-edit的V层与term-add的基本相同
只需将h1标签中填入可辨识此组件的内容即可。
term-routing.module.ts
import { NgModule } from '@angular/core';import {RouterModule, Routes} from '@angular/router';import {TermIndexComponent} from './term-index/term-index.component';import {TermAddComponent} from './term-add/term-add.component';import {TermEditComponent} from './term-edit/term-edit.component';import {DialogEntryComponent} from '../../common/dialog-entry/dialog-entry.component';const routes: Routes = [ { path: '', component: TermIndexComponent, children: [ { path: 'add', component: DialogEntryComponent, data: { component: TermAddComponent } }, { path: 'edit/:TermId', component: DialogEntryComponent, data: { component: TermEditComponent } } ] }];@NgModule({ imports: [ RouterModule.forChild(routes) ], exports: [RouterModule]})export class TermRoutingModule { }dialog-entry.component.ts
import {Component} from '@angular/core';import {MatDialog} from '@angular/material/dialog';import {ActivatedRoute, Router} from '@angular/router';@Component({ template: ''})export class DialogEntryComponent { url: string | undefined; constructor(public dialog: MatDialog, private router: Router, private route: ActivatedRoute) { this.url = this.route.snapshot.url[0].path; this.openDialog(); } openDialog(): void { const dialogRef = this.dialog.open(this.route.snapshot.data.component, { width: '250px' }); const relativeBackUrl = this.getRelativeBackUrl(); dialogRef.afterClosed().subscribe(result => { this.router.navigate([relativeBackUrl], { relativeTo: this.route }); }); } private getRelativeBackUrl(): string { if (this.url === 'add') { return '../'; } else if (this.url === 'edit') { return '../../'; } else { return ''; } }}dialog-entry.module.ts
import {NgModule} from '@angular/core';import {MatDialogModule} from '@angular/material/dialog';import {DialogEntryComponent} from './dialog-entry.component';@NgModule({ declarations: [ DialogEntryComponent ], imports: [ MatDialogModule ],})export class DialogEntryModule {}最初在应用时须要记得在模块中引入DialogEntryModule。此demo为term模块则有
term.module.ts
@NgModule({ declarations: [TermIndexComponent, TermAddComponent, TermEditComponent], imports: [ CommonModule, TermRoutingModule, ReactiveFormsModule, MatButtonModule, DialogEntryModule, MatDialogModule ], providers: [ { provide: MatDialogRef, useValue: {} }, ],})总结
至此，咱们的指标终于达成了，之后其余模块想要复用的话，只须要做以下3项工作即可：
1.在module文件中importers咱们的DialogEntryModule；
2.给主组件的V层button中绑定转跳的路由信息；
3.在routing.module文件中设置对应路由所要转跳的组件。
家喻户晓，第2第3步工作就算不应用动静组件弹窗也是无奈防止的。而像本文这般配置好后，之后其余模块再想要复用时，多出的工作内容只有第1步和第3步中多写几行简略的代码而已。这就是咱们想要的，不必造反复的轮子，以及能够在复用起来轻松而简便。
成果预览
参考文章
https://medium.com/ngconf/routing-to-angular-material-dialogs...