Question

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

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

LanguageService是包含全局语言设置的服务。例如，英语和en forpolish的代码可以是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

这可以使用不带参数的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);
    }
]);

Answer 2

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

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

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

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

中

这些是我的选择。

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

2 个答案: