如何解决在内部/具有ngrx效果的情况下打开有角度的材质对话框
我对Typescript / angular / ngrx开发还很陌生,所以也许我的问题听起来有些愚蠢... 目前,我正在开发一个基于角度,角度材料和ngrx的新应用程序。
据我所读,如果您正在使用redux,则需要在redux中做尽可能多的事情。 在我的示例中:使用ngrx效果调用有角材质对话框
- 我们是否想要像openDialog,closeDialog,handleSave,handleCancel等通用效果?
- 还是我们要在组件
this.dialog.open(MyDialogToOpen)
中打开一个对话框,然后 仅处理效果内对话框的响应?
目前,我只是在玩我的新应用程序以及使用angular和ngrx获得的新机会。 我试图开发通用解决方案,但是它不起作用,我也不知道为什么:(
在我的组件中,我将效果称为openDialog
shell.component.ts
const payload: OpenDialogPayload = {
componentOrTemplateRef: ChangeUserSettingsComponent,config: {
width: '250',},};
this.store.dispatch(openDialog(payload));
dialog.actions.ts
export interface OpenDialogPayload {
componentOrTemplateRef: ComponentType<any>;
config?: MatDialogConfig;}
export const openDialog = createAction('[DIALOG] open dialog',props<OpenDialogPayload>());
dialog.effects.ts
openDialog$ = createEffect(() =>
this.actions$.pipe(
ofType(openDialog),flatMap((action) => {
const dialogRef = this.dialog.open(action.componentOrTemplateRef,{
data: {},});
return dialogRef.afterClosed();
}),),);
提示:如果我从动作中删除道具并直接在效果内部调用对话框,我想它就可以了
对话框或多或少打开: Dialog is opening on the left side with errors
我确实尝试了一切。但是我无法使其正常工作。 我怎么了 我的完全方法错误吗? 您如何处理对话框?
非常感谢! 斯文
解决方法
确保以这种方式发挥作用
dialog.effects.ts
openDialog$ = createEffect(() =>
this.actions$.pipe(
ofType(openDialog),flatMap((action) => {
const dialogRef = this.dialog.open(ChangeUserSettingsComponent,{
data: {},});
return dialogRef.afterClosed();
}),),);
但是不会通用。传递一个匿名函数返回您的组件应该可以,我的对话框效果也遇到了同样的问题。我不知道为什么它会这样工作,也不是一个好习惯。
shell.component.ts
const payload: OpenDialogPayload = {
componentOrTemplateRef: () => ChangeUserSettingsComponent,config: {
width: '250',},};
但是别忘了调用此功能
dialog.effects.ts
openDialog$ = createEffect(() =>
this.actions$.pipe(
ofType(openDialog),flatMap((action) => {
const dialogRef = this.dialog.open(action.componentOrTemplateRef(),);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。