UI 路由器 - 如何在状态之间存储数据而不将它们显式传递给 $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。然后：

在 Image 我有德语版本
我可以单击 Go back 按钮返回图库
但是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

1- 您可以在路线中使用 params 选项

.state('about', {
        url: '/about?isDraft',
        params: {
         isDraft: null
        }
      })

2- 您可以按照您的说明使用服务

3- 您可以将数据存储在 sessionStorage

这些是我的选择。

Answer 2

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

方法一：

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

在控制器中，您可以像这样访问它：

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

参考resolve in ui-router

方法二：

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

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

在控制器中，您可以像这样访问它：

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

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

UI Router - how to store data between states without passing them explicitly to $state.go(...)?

javascript

routing

angularjs

angular-ui

angular-ui-router