在内部/具有ngrx效果的情况下打开有角度的材质对话框

编程问答 2022-08-12

问题描述

我对Typescript / angular / ngrx开发还很陌生，所以也许我的问题听起来有些愚蠢... 目前，我正在开发一个基于角度，角度材料和ngrx的新应用程序。

据我所读，如果您正在使用redux，则需要在redux中做尽可能多的事情。 在我的示例中：使用ngrx效果调用有角材质对话框

  1. 我们是否想要像openDialog，closeDialog，handleSave，handleCancel等通用效果？
  2. 还是我们要在组件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(),);
angularangular-materialdialogdialogeffectsngrx