Question

我们具有以下功能，当有未保存的更改并且用户试图离开时，向用户显示一个确认对话框。

$scope.$on('$stateChangeStart', (event, toState, toParams, __fromState, fromParams) => {

            if (fromParams.userConfirmedRedirect) {
                return;
            }

            const checklistIsActive = $scope.revision &&
                $scope.revision.checklist.status === ChecklistConstants.Status.ACTIVE;
            const stateChangeIsWithinSameChecklist = toParams.id === $scope.checklistId;
            if (checklistIsActive && !stateChangeIsWithinSameChecklist) {

                const queueKey = PromiseQueueKeyGenerator.generateByChecklistId($scope.checklistId);
                if (PromiseQueueService.isInProgressByKey(queueKey)) {

                    event.preventDefault();

                    MessageBox.confirm({
                        title: 'Are you sure?',
                        message: 'Please wait while we save your changes and try again.',
                        okButton: {
                            type: 'danger',
                            text: 'Yes',
                            action() {
                                fromParams.userConfirmedRedirect = true;
                                $state.go(toState.name, toParams, options);
                            },
                        },
                    });
                }

            }

        });

这以前曾经可以很好地工作，但是现在会引发错误（可能是在升级后发生）。

错误是：

TypeError: Attempted to assign to readonly property.
  at action(./app/features/checklist/checklist-ctrl.js:517:33)
  at fn(./app/features/message-box/confirm-ctrl.js:13:53)
  at expensiveCheckFn(./node_modules/angular/angular.js:16213:1)
  at $element(./node_modules/angular/angular.js:26592:1)
  at $apply(./node_modules/angular/angular.js:18094:1)
  at ? (./node_modules/angular/angular.js:26597:1)
  at dispatch(/npm/jquery/dist/jquery.min.js:2:41777)
  at s(/login:5:23562)
  at _a(./node_modules/@sentry/browser/dist/index.js:3257:1)

它引发的行是这样的：

fromParams.userConfirmedRedirect = true;

我了解错误的原因，但是，我坚持使用解决方案。

我们需要传递一个附加参数，以在下一个$stateChangeStart事件中使用，以确保每个路线更改仅显示一次确认。

我尝试为此使用options参数：

$scope.$on('$stateChangeStart', (event, toState, toParams, __fromState, __fromParams, options) => {

            if (options.custom.userConfirmedRedirect) {
                return;
            }

            const checklistIsActive = $scope.revision &&
                $scope.revision.checklist.status === ChecklistConstants.Status.ACTIVE;
            const stateChangeIsWithinSameChecklist = toParams.id === $scope.checklistId;
            if (checklistIsActive && !stateChangeIsWithinSameChecklist) {

                const queueKey = PromiseQueueKeyGenerator.generateByChecklistId($scope.checklistId);
                if (PromiseQueueService.isInProgressByKey(queueKey)) {

                    event.preventDefault();

                    MessageBox.confirm({
                        title: 'Are you sure?',
                        message: 'Please wait while we save your changes and try again.',
                        okButton: {
                            type: 'danger',
                            text: 'Yes',
                            action() {
                                options.custom.userConfirmedRedirect = true;
                                $state.go(toState.name, toParams, options);
                            },
                        },
                    });
                }

            }

        });

但是这种方法不起作用。

我还有其他选择吗？

TypeError：尝试在'$ stateChangeStart'事件的参数上分配给只读属性

0 个答案: