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'
      });

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

提前谢谢你，

更新

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

将每个状态更改为以下状态

 .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 文件的标签内插入以下行来设置站点的基础 url：

 <base href="/">

谢谢

Answer 1

将语言代码添加为 url 参数

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

然后在您的控制器中，使用 $stateParams

获取 langcode 值

$scope.language = $stateParams.langcode;

Angular 多语言应用中的 JS 路由不工作

Angular JS routing in multilanguage app is not working

javascript

angularjs

angularjs-routing