AngularJS UI 路由器 append/force 语言代码如果没有

Question

我有一个场景，我的应用程序的第一个路由是语言代码，这意味着应用程序的所有路由都依赖于语言代码，我的 $stateProvider 看起来像这样：

$stateProvider
    .state('app',{
        url: '/:languageCode',
        templateUrl:'./views/routes/app.html',
        controller:'appController',
        abstract: true,
    })
    .state('app.home',{
        url:'/',
        templateUrl:'./views/routes/home.html',
        controller:'homeController',
    })
    .state('app.products', {
        url:'/product',
        abstract: true,
    })
    .state('app.products.selectedProduct', {
        url: '/:productId',
        templateUrl:'./views/routes/productPreview.html',
        controller:'previewController'
    });

最终路线示例：

http:localhost:3000/de
http:localhost:3000/it/products
http:localhost:3000/en/products/some-product-id

我希望能够使用不存在的相关语言代码案例来路由应用程序，因此如果用户导航至 http:localhost:3000/products，该应用程序将附加缺少的 langCode 以及用户保存的语言选择或应用程序的默认语言，（即：http:localhost:3000/it/products）。

如何实现？

Answer 1

经过一些研究，我能够使用 $urlRouterProvider 的 rule and otherwise 方法实现这一点

在 rule 方法中，我检查 url 路径是否包含语言代码，如果不包含则追加。如果路线不存在，则 otherwise 方法仅用于导航到家。

执行过程如下：

    // Force urls with lang code
    $urlRouterProvider.rule(function ($injector, $location) {
        //what this function returns will be set as the $location.url
        let path = $location.path(),
            langCode = path.split('/')[1], // 0 is "" cuz path begins with /
            // get lang for code
            lang = window.globals.SUPPORTED_LANGS.find((lang) => lang.code === langCode.toLowerCase());
        if (!lang) {
            // Return path with lang code
            return `/${localStorage.getItem(enums.localStorageKeys.preferredLanguage) || 'it'}${path}`;
        }
        // otherwise return nothing so no state changes will not occur
    });
    // Default route case doesn't exit
    $urlRouterProvider.otherwise(function ($injector, $location) {
        return `/${localStorage.getItem(enums.localStorageKeys.preferredLanguage) || 'it'}/`
    });

AngularJS UI 路由器 append/force 语言代码如果没有

AngularJS UI router append/force language code if not there

angularjs

angular-ui-router