matDialog 中的延迟加载模块

尼克尔

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

有没有办法 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*/);
      });
  }
}
尼克尔

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

请参阅参考:

以防万一链接不再可用,我会包含一个简短的步骤和示例

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

MatDialog中的动画不起作用

Angular中的* ngFor和MatDialog问题

Angular-模块AppModule导入的意外值MatDialog

在材料MatDialog内部动态加载零部件

在MatDialog Content Angular 7中添加新行

退出MatDialog在移动浏览器中不起作用

为什么MatDialog组件中的Angular Form非常慢?

python中的延迟加载模块

角度8中的延迟加载模块

延迟加载功能模块中的问题

Angular,在延迟加载的模块中暴露组件

MatDialog中的“ router-outlet”在Angular 7中不起作用

MatDialog关闭并在Angular 6中更新数据库中的数据后如何刷新组件?

在我的函数 ngDoCheck() Angular 中关闭我的 matDialog 时出现问题

如何编写简单的测试来检查 Angular 2 中 MatDialog 的行为?

在 Jasmine 中对 MatDialog 进行单元测试时,无法读取未定义的属性“afterClosed”

Angular中MatDiaLog的关闭按钮获取错误无法读取null的属性“关闭”

角延迟加载(模块尚未导入到模块中)

是否可以在Angular 8中预加载延迟加载的模块?

显示延迟加载模块中的加载微调器

如何使用延迟加载仅加载angular 8中的模块

如何从MatDialog获取数据?

Angular MatDialog 立即关闭

angular 4.x 中延迟加载模块中的错误

带有子路由的延迟加载模块中的角路由

延迟加载模块中的“角材料”对话框

延迟加载模块中Angular Material datepicker的语言开关

如何检查或证明angular2中的模块是延迟加载的?

延迟模块加载在ES6中如何工作