Question

我有angularjs项目实现了多语言并使用ui-router进行路由。每种语言都有不同的网址。例如：

当app运行并从数据库加载时，所有状态都会自动注册url。例如：

angular.module('bxApp').run(["$http", function ($http) {
  $http.get('/Home/Routes').success(function (result) {
    result = result || {};
    if (angular.isDefined(result) && result !== null) {
      _.each(result.Routes, function (route) {
        stateProvider.state(route.Name, {
          url: route.Url,
          templateUrl: route.TemplateUrl,
          controller: route.Controller,
        });
      });
    }
  });
}]);

它运行良好但是当用户复制此链接并粘贴到浏览器或从其他网站点击此链接时，它将无法正常工作。我认为因为状态无法找到所以它将被重定向到默认值并且它不会保留用户输入或复制的URL。在这种情况下，如何做到这一点？

谢谢，

Answer 1

您正在通过HTTP调用服务器来声明您的状态：问题是这些状态定义太晚，以至于当用户将URL粘贴到新选项卡中时用户无法导航到这些状态。

要明白，让我们解构会发生什么：

用户位于初始页面/其他网站上，并复制该网址。
他将其粘贴到新标签页
您的角度应用程序加载，完成其配置阶段而未声明任何这些状态，并发送HTTP调用。
ui-router无法路由到与粘贴的URL匹配的状态，因为相应的状态尚未出现，并且重定向到默认值
HTTP响应返回，您的状态已创建（但为时已晚）。

如何使其有效？

我的第一反应就是不将您的状态存储在您的服务器上。除非您希望UX的核心与语言相关，否则您不必这样做。

但是，嘿，我们说无论如何我们都想做。我建议你试试这个：声明一个顶级'language'状态，让它在resolve子句中加载其他状态。这将“阻止”路由，直到声明其他状态：

angular.module('bxApp')
  .config(['$urlRouterProvider', function ($urlRouterProvider) {
    $urlRouterProvider
      .state('language',{
        url: '/:language',
        resolve: {
          childrenLoaded: ['$http', function ($http) {
            // returning a promise is essential to have the 'waiting' behavior
            return $http.get('/Home/Routes').then(function (data) {
              var result = data.result || {};
              if (angular.isDefined(result) && result !== null) {
                _.each(result.Routes, function (route) {
                  $stateProvider.state(route.Name, {
                    url: route.Url,
                    templateUrl: route.TemplateUrl,
                    controller: route.Controller
                  });
                });
              }
            });
          }]
        }
      })
  }]);

同样，这种方法可能会遇到麻烦：我强烈建议您对状态进行硬编码，而不是将其存储在数据库中。如果所有不同语言的文本和网址都不同，那么您将罚款并使用网址参数。

当用户输入，复制粘贴或从其他网站点击网址时，如何使用多语言网址

1 个答案: