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

我在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路由器完成，没有自己的实现？提前感谢您的帮助。

来源

2017-01-30 Radek Anuszewski

创建将存储当前的语言抽象父状态。 –

@PetrAveryanov听起来很有趣，但我能够更新它吗？我可以从'gallery.details'状态改变语言（在画廊的不同翻译之间切换） –

1 - 你可以在你的路线使用params项

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

2 - 您可以使用服务，你说

3 - 你可以存储在sessionStorage的

数据这是我的选项。

来源

2017-01-30 10:33:36

对我来说，看起来我必须在'image's组件的所有路由中添加'？isDraft'（因为它们是嵌套的如'gallery/2/image/4'）以'gallery.details'状态检索它。恐怕我必须使用服务，我错了吗？ –

是的，你最好使用服务 –

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

方法二：

在这里你不需要的决心，只是通过对象使用$ state.current在控制器UI路由器状态和访问数据的关键。数据。见下面的例子：

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

在控制钮U存取权限它像：

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

来源

2017-01-30 11:32:22 vikas

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

回答

相关问题