从效果中关闭对话框组件

Question

我需要关闭来自@ngrx/effect

的angular material对话框

这是我的代码

import { MatDialogRef, MatDialog } from "@angular/material/dialog";
import { AddComponent } from "./../../add/add.component";

@Injectable()
export class UserEffects {
@Effect()
addNewUser$ = this.actions$.pipe(
    ofType(actions.UserActionTypes.addNewUser),
         mergeMap((user: actions.addNewUser) =>
             this.userService.createUser(user.user).pipe(
                map(() => {
                  new actions.LoadUsers(),
                  this.notificationService.success("User added successfully!");
                  this.dialogRef.close();     <------ // here i try to close
                }),
              catchError(error => of(new actions.Error(error.error)))
            )
        )
    );

constructor(
    private actions$: Actions<actions.UserActions>,
    private userService: UserService,
    private notificationService: NotificationPopUpServiceService,
    public dialogRef: MatDialogRef<AddComponent>
) {}
}

然后我得到错误

main.ts:13 NullInjectorError: R3InjectorError[EffectsRootModule -> InjectionToken ngrx/effects: Root Effects -> UserEffects -> MatDialogRef -> MatDialogRef -> MatDialogRef]: NullInjectorError: No provider for MatDialogRef!

从效果或服务中关闭 material-dialog 的最佳方法是什么？因为我们总是需要为对话框组件设置名称？

谢谢

Answer 1

在你的@Effect的构造函数中，你需要提供依赖：

 private dialogRef: MatDialogRef<MyDialogComponentToClose>

并且您需要在您的效果所在的模块中导入 MatDialogModule。

Answer 2

我想我找到了解决办法，但如果有更好的办法，请告诉我... 我添加 this.dialogRef.closeAll()

@Effect()
    addNewUser$ = this.actions$.pipe(
     ofType(actions.UserActionTypes.addNewUser),
        mergeMap((user: actions.addNewUser) =>
          this.userService.createUser(user.user).pipe(
             map(() => {
               new actions.LoadUsers(),
               this.notificationService.success("User added successfully!");
               this.dialogRef.closeAll();    <--- //this is the key
             }),
    catchError(error => of(new actions.Error(error.error)))
  )
)

);

编辑：

模态已关闭，但出现错误

core.js:6014 ERROR Error: Effect "UserEffects.addNewUser$" dispatched an invalid action: undefined

TypeError: Actions must be objects

有什么帮助吗？谢谢

Answer 3

关于你的 'dispatched an invalid action: undefined'

每个效果都必须分派一个动作，除非您指定： { dispatch: false }

Answer 4

您可以在对话框组件中收听 actions$: Actions，订阅它并在触发操作时关闭对话框，而无需重复使用 NgRx 效果并需要注入所有对话框引用。

您的对话框组件的构造函数将包括以下内容：

constructor(    
    public dialogRef: MatDialogRef<YourDialogComponent>,
    private readonly actions$: Actions) {}

在 ngOnInit 中，您将听到旨在关闭对话框的相关操作。我通常依靠 ngOnDestroy 取消订阅 observables。

private readonly subscription = new Subscription();

ngOnInit(): void {
    this.subscription.add(
      this.actions$
        .pipe(ofType(actions.UserActionTypes.LoadUsers))
        .subscribe(() => this.dialogRef.close())
    );
}

ngOnDestroy(): void {
    this.subscription.unsubscribe();
}

注意你正在听的动作；它必须是由 addNewUser$ 效果触发的，在您的情况下似乎是 new actions.LoadUsers() 。常见的模式是在 addNewUser 操作后加上 addNewUserSuccess 或 addNewUserFailure.

您可能同时弹出多个错误对话框。这种方法允许管理由不同组件组成的并发对话框：closeAll() 将（不出所料）关闭所有 material 对话框。

Answer 5

我认为关闭对话框的最佳解决方案是订阅效果变量即

// close the dialog
// Inside the dialog component
 this.userEffects.addNewUser$.pipe(
     ofType(Actions.LoadUsers)
 ).subscribe(_ => this.matDialogRef.close());

从效果中关闭对话框组件

Close dialog component from effect

angular

angular-material

ngrx-store

ngrx-effects