javascript - UI Router - 如何在状态之间存储数据而不将它们显式传递给 $state.go(...)？

Question

我在Gallery组件中有语言代码:

function Gallery(LanguageService) {
  var $ctrl = this;
  $ctrl.$onInit = function () {
     $ctrl.code = LanguageService.language;
     _loadGallery($ctrl.code);
  }
}

LanguageService 是包含全局语言设置的服务。例如，代码可以是 en 表示英语，pl 表示波兰语。从 Gallery 我可以移至 Image details 组件，其中 $onInit 看起来相同 - 从语言中获取代码并加载数据。问题是我可以添加图像翻译，例如德语翻译 - de，它会更改 LanguageService。然后:

1. 在图片上我有德语版本
2. 我可以点击返回按钮返回图库
3. 但是 Gallery 没有德语翻译，我会收到 404 Not Found

乍一看，我可以传递到Image状态galleryLanguage:

$state.go("image.details", {id: image.id, galleryLanguage: $ctrl.language});

但是在每个 image 状态中没有明确定义它就会丢失，例如，如果从 image.details 我想转到 image.edit > 我必须做:

$state.go("image.edit", {id: image.id, galleryLanguage: $ctrl.language});
// And if I want to bo back to gallery
function goBackToGallery() {
  $state.go(`gallery.details`, {galleryLanguage: $ctrl.galleryLanguage}); //and then in Gallery use it if present
}

当然可以通过附加服务来完成:

function Gallery(LanguageService, TemporaryService) {
    var $ctrl = this;
    $ctrl.$onInit = function () {
      $ctrl.code = TemporaryService.language? TemporaryService.language : LanguageService.language;
      TemporaryService.language = undefined;
      _loadGallery($ctrl.code);
  }

  function goToImageDetails(image) {
    TemporaryService.language = String($ctrl.code);
    $state.go('image.details', {id: image.id});
  }
}

但也许可以使用 Angular UI 路由器来完成，而不需要自己的实现？预先感谢您的每一个帮助。

Answer 1

这可以使用不带参数的 ui-route 来完成。请参阅下面的示例:

方法一:

.state('eventListing', {
    url: '/events',
    templateUrl: 'views/eventListing.html',
    controller: 'eventListing',
    resolve: {
        category: function() {
            return { id: 1 };
        }
    }
})

在 Controller 中，您可以这样访问它:

app.controller('eventListing', ['$scope', 'category',
    function ($scope, category) {
        $scope.categoryId = parseInt(category.id);
    }
]);

引用 resolve in ui-router

方法二:

这里不需要解析，只需在 ui-router 状态中传递带有数据键的对象，并使用 $state.current.data 在 Controller 中访问。请参阅下面的示例:

  .state('eventListing', {
    url: '/events',
    templateUrl: 'views/eventListing.html',
    controller: 'eventListing',
    data: {
        id: 1
    }
  })

在 Controller 中，您可以这样访问它:

app.controller('eventListing', ['$scope', '$state',
    function ($scope, $state) {
        $scope.categoryId = parseInt($state.current.data.id);
    }
]);