Angular中的路线本地化

Localizing routes in Angular

本文关键字：本地化 Angular      更新时间：2024-01-15

我正试图用多种语言创建一个Angular应用程序，但遇到了路由问题。我找到了一个变通方法，使必要的路由对两种语言有效：

var app = angular.module("app", ["localization", "ngResource", "ngRoute"]).
config(function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/en-US/Gameplan/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
        when('/da-DK/Gameplan/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
        when('/en-US/Gameplan/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        when('/da-DK/Gameplan/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        when('/en-US/Gameplan/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        when('/da-DK/Gameplan/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
        otherwise({ redirectTo: '/en-US/Gameplan/Admin/Fixtures/List' });
    $locationProvider.html5Mode(true); //will use html5 mode rather than hashbang where available
});

然而，我仍然有一个链接的问题，目前我的链接看起来像这样：

<a href="/en-US/Gameplan/Admin/Fixtures/Add"><i class="glyphicon glyphicon-plus"></i></a>
<a href="/en-US/Gameplan/Admin/Fixtures/Edit/{{fixture.Id}}"><i class="glyphicon glyphicon-edit"></i></a>

我不想对URL进行硬编码，并且我有一个客户端对象来返回区域设置（在本例中为en-US或da-DK），但我无法动态设置href值。在Angular中有什么方法可以做到这一点，或者在本地化路线方面有什么不同的方法吗？

这不是AngularJS特定的，但为什么不在知道用户想要什么语言的UI后立即设置cookie呢？然后，客户端和服务器都可以在每个页面上随时访问它，您不必在URL中来回穿梭。

这可能为时已晚，但如果您使用Angular 2x，则有一个库本地化路由器。你可以在这里找到它。

相关文章：