多语言应用程序中的 Angular JS 路由不起作用

Question

我正在尝试实现一个多语言应用程序。 我需要通过在控制器名称前的 URL 中添加两个字母 iso 参数来访问请求的语言。 例如： http://appPath/en/home http://appPath/fr/home http://appPath/ar/home

 $stateProvider
         .state('home', {
             url: '/home',
             templateUrl: baseTemplateUrl + "home.html",
             controller: 'homeController'
         })
        .state('login', {
            url: '/login',
            templateUrl: baseTemplateUrl + "login.html",
            controller: 'loginController'
        })
      .state('customers', {
          url: '/customers',
          templateUrl: baseTemplateUrl + "customers.html",
          controller: 'customersController'
      })
      .state('signup', {
          url: '/signup',
          templateUrl: baseTemplateUrl + "signup.html",
          controller: 'signupController'
      });

我现在正在使用基本的 stateprovider 进行路由。知道如何更改它以使此功能正常工作吗？

提前谢谢你，

---

更新

---

对于遇到同样问题的人，我的解决方案是：

将每个状态更改为以下

 .state('signup', {
              url: '/:lang/signup',
              templateUrl: baseTemplateUrl + "signup.html",
              controller: 'signupController',
              resolve: {
                  lang: ['$stateParams', function ($stateParams) {
                      document.cookie = "lang=" + $stateParams.lang;
                  }]
              }
          });

我将 $stateParams lang 的值保存到 cookie 中，因此您可以通过 app.run() 访问它并将其传递给我的 translationService，因为 $stateParams 尚未在那里初始化。

这样您的应用程序将仅适用于 html5mode=false。这意味着您将始终在 URL (http://path/#/{lang}/{controllername} 中看到一个丑陋的标签，为了解决这个问题，我以这种方式配置了 $locationProvider：

 $locationProvider.html5Mode(true).hashPrefix('!');

并通过在 index.html 文件的标签内插入这一行来设置网站的基本网址：

 <base href="/">

谢谢

Answer 1

添加语言代码作为url参数

$stateProvider
     .state('home', {
         url: '/:langcode/home',
         templateUrl: baseTemplateUrl + "home.html",
         controller: 'homeController'
     });

在您的控制器中，使用 $stateParams 获取 langcode 值

$scope.language = $stateParams.langcode;