使用ui-router和angular-translate本地化URL

Question

我正在使用ui-router进行路由和角度转换以进行翻译.我想要实现的是将所选语言绑定到url,如下所示:

www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

它将作出相应的回应.

试图寻找例子,但没有找到任何东西.如果有人实施了类似的解决方案,我很想听听你是怎么做到的.

谢谢

Answer 1

我在这些方面使用了一些东西:

CoffeeScript的

angular.module('app')
.config([
  '$stateProvider'
  ($stateProvider) ->
    $stateProvider.state 'app',
      abstract: true
      url: '/{locale}'
    $stateProvider.state 'app.root',
      url: ''
    $stateProvider.state 'app.root.about',
      url: '/about'
])

JavaScript的

angular.module('app').config([
  '$stateProvider', function($stateProvider) {
    $stateProvider.state('app', {
      abstract: true,
      url: '/{locale}'
    });
    $stateProvider.state('app.root', {
      url: ''
    });
    return $stateProvider.state('app.root.about', {
      url: '/about'
    });
  }
]);

有了这个,你可以注入$stateParams你的控制器并访问那里的语言环境:

CoffeeScript的

angular.module('app')
.controller('appCtrl', [
  '$scope', '$stateParams'
  ($scope, $stateParams) ->
    $scope.locale = $stateParams.locale
])

JavaScript的

angular.module('app').controller('appCtrl', [
  '$scope', '$stateParams', function($scope, $stateParams) {
    return $scope.locale = $stateParams.locale;
  }
]);

或者,如果要自动影响整个页面,请$stateChangeStart在应用程序控制器或类似设备中使用该事件:

CoffeeScript的

$scope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) ->
  $translate.use(toParams.locale)

JavaScript的

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  $translate.use(toParams.locale);
});

请注意,如果您使用的是angular-translate v1.x,则应使用$translate.uses而不是$translate.use.