matDialog 中的延迟加载模块

Question

我有一个组件，它是延迟加载模块的一部分。

有没有办法 matDialog.open() 和延迟加载模块并显示组件？

export class testComponent implements OnInit {
  constructor(
    public matDialog: MatDialog,
    private moduleLoader: NgModuleFactoryLoader
  ) {}
  ngOnInit() {}

  openModal() {
    this.moduleLoader
      .load("./modules/test-modal/test-modal.module#TestModalModule")
      .then((module: NgModuleFactory<any>) => {
        this.matDialog.open(/*insert component and load the module*/);
      });
  }
}

Answer 1

我在 mat-dialog 中找到了一个带有组件的延迟加载模块的示例。

请参阅参考：

• https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177

以防万一链接不再可用，我提供了一个简短的步骤和示例来做到这一点

1. 创建延迟加载模块

2. 创建入口组件（空组件）来启动模态组件

@Component({
template: ''
})
export class DialogEntryComponent {
    constructor(public dialog: MatDialog, private router: Router,
    private route: ActivatedRoute) {
    this.openDialog();
    }
    openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
        width: '250px'
    });
    dialogRef.afterClosed().subscribe(result => {
        this.router.navigate(['../'], { relativeTo: this.route });
    });
    }
}

3.创建延迟加载模块的路由

const routes: any = [
    {
    path: "",
    component: modalComponent(actual component with content)
    }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [DataResolver]
})
export class DialogEntryRoutingModule {}

4. 在父路由器模块中，包含延迟加载 DialogEntryModule 的路径

RouterModule.forRoot([
    {
      path: 'home',
      component: ParentComponent,
      children: [
        {
          path: 'dialog',
          loadChildren:
              "../example/entry-dialog.module#DialogEntryModule"
        }
      ]
    },
    { path: '**', redirectTo: 'home' }
  ])

5. 在 ParentComponent 中通过指向 DialogEntryModule 打开模式

<button mat-raised-button routerLink="dialog">Pick one</button>