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

Question

我正在尝试实现一个多语言应用程序。 我需要通过在 Controller 名称之前的 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'
      });

我现在正在使用基本的状态提供程序进行路由。知道如何更改此设置以使此功能正常工作吗？

提前谢谢您，

---

更新

---

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

将每个状态更改为以下

 .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() 访问它并将其传递给我的翻译服务，因为 $stateParams 尚未初始化。

这样您的应用程序将仅在 html5mode=false 的情况下运行。这意味着您总是会在 URL 中看到一个丑陋的主题标签( http://path/#/ {lang}/{controllername} ，为了解决这个问题，我这样配置了 $locationProvider :

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

并通过在 index.html 文件的标记内插入以下行来设置网站的基本 url:

 <base href="/">

谢谢

Answer 1

添加语言代码作为 URL 参数

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

并在您的 Controller 中，使用 $stateParams 获取 langcode 值

$scope.language = $stateParams.langcode;