Angular 打开内部/具有ngrx效果的角度材质对话框

我对typescript/angular/ngrx开发相当陌生，所以我的问题听起来可能有点愚蠢。。。 目前，我正在开发一个基于角度、角度材料和ngrx的新应用程序

据我所知，如果您使用redux，您希望在redux中做尽可能多的事情。 在我的示例中：使用ngrx效果调用角度材质对话框

我们想要像openDialog、closeDialog、handleSave、handleCancel这样的通用效果吗

或者我们想在组件内打开一个对话框

this.dialog.open（MyDialogToOpen）

和 仅处理效果内部对话框的响应

目前，我只是在玩我的新应用程序和angular和ngrx带来的新机会。 我试图开发通用解决方案，但它不起作用，我不知道为什么：(

在我的组件中，我调用一个effect openDialog

shell.component.ts

 const payload: OpenDialogPayload = {
        componentOrTemplateRef: ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

    this.store.dispatch(openDialog(payload));

export interface OpenDialogPayload {
componentOrTemplateRef: ComponentType<any>;
config?: MatDialogConfig;}

export const openDialog = createAction('[DIALOG] open dialog', props<OpenDialogPayload>());

    openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(ChangeUserSettingsComponent, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

const payload: OpenDialogPayload = {
        componentOrTemplateRef: () => ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef(), {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

dialog.actions.ts

 const payload: OpenDialogPayload = {
        componentOrTemplateRef: ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

    this.store.dispatch(openDialog(payload));

export interface OpenDialogPayload {
componentOrTemplateRef: ComponentType<any>;
config?: MatDialogConfig;}

export const openDialog = createAction('[DIALOG] open dialog', props<OpenDialogPayload>());

    openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(ChangeUserSettingsComponent, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

const payload: OpenDialogPayload = {
        componentOrTemplateRef: () => ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef(), {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

提示：如果我从动作中移除道具，并直接在效果中调用对话框，我猜它会起作用

对话框或多或少处于打开状态：

我真的什么都试过了，但都没法用。 我犯了什么错？ 我的方法完全错了吗？ 你如何处理你的对话

多谢各位！

---

Sven

确保您的效果以这种方式发挥作用

dialog.effects.ts

 const payload: OpenDialogPayload = {
        componentOrTemplateRef: ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

    this.store.dispatch(openDialog(payload));

export interface OpenDialogPayload {
componentOrTemplateRef: ComponentType<any>;
config?: MatDialogConfig;}

export const openDialog = createAction('[DIALOG] open dialog', props<OpenDialogPayload>());

    openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(ChangeUserSettingsComponent, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

const payload: OpenDialogPayload = {
        componentOrTemplateRef: () => ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef(), {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

但它不会是通用的。通过匿名函数返回组件应该可以工作，我的对话框效果也有同样的问题。我无法找到它为什么这样工作，也无法确定这是否是一个好的做法

shell.component.ts

 const payload: OpenDialogPayload = {
        componentOrTemplateRef: ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

    this.store.dispatch(openDialog(payload));

export interface OpenDialogPayload {
componentOrTemplateRef: ComponentType<any>;
config?: MatDialogConfig;}

export const openDialog = createAction('[DIALOG] open dialog', props<OpenDialogPayload>());

    openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(ChangeUserSettingsComponent, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

const payload: OpenDialogPayload = {
        componentOrTemplateRef: () => ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef(), {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

但别忘了调用这个函数

dialog.effects.ts

 const payload: OpenDialogPayload = {
        componentOrTemplateRef: ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

    this.store.dispatch(openDialog(payload));

export interface OpenDialogPayload {
componentOrTemplateRef: ComponentType<any>;
config?: MatDialogConfig;}

export const openDialog = createAction('[DIALOG] open dialog', props<OpenDialogPayload>());

    openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(ChangeUserSettingsComponent, {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);

const payload: OpenDialogPayload = {
        componentOrTemplateRef: () => ChangeUserSettingsComponent,
        config: {
            width: '250',
        },
    };

openDialog$ = createEffect(() =>
    this.actions$.pipe(
        ofType(openDialog),
        flatMap((action) => {
            const dialogRef = this.dialog.open(action.componentOrTemplateRef(), {
                data: {},
            });
            return dialogRef.afterClosed();
        }),
    ),
);