Question

我使用$ stateProvider进行路由，并使用angular-translate进行翻译。我想要实现的是将所选语言绑定到URL并使用[default = en]使语言可选。像这样：

www.mydomain.com/home
www.mydomain.com/en/home
www.mydomain.com/ar/home

并做出相应的回应。

我使用了这段代码

$urlRouterProvider.otherwise("/home");
$stateProvider
        // Homepage:
        .state("app", {
            url: "/:lang?",
            abstract: true,
            template: '<ui-view/>'
        })


        .state("app.home", {
            url: "/home",
            templateUrl: "common/views/main.html"
        });

我想转到带有语言参数的主页，如

www.mydomain.com/en/home

或没有它像

www.mydomain.com/home

由于

Answer 1

您可以指定网址

$urlRouterProvider.otherwise("/home");
$stateProvider
    // Homepage:
    .state("app", {
        url: "/:lang",
        abstract: true,
        template: '<ui-view/>'
    })
    .state("app.home", {
        url: "/home",
        templateUrl: "common/views/main.html"
    });

控制器中的

$state.go("app",{lang:"en"});

注意：url变量的名称应与$ state

中的名称相同

Answer 2

您可以在配置的squash: true属性中为可选参数指定params选项。当参数值是默认值时，这也将删除它周围的任何斜杠。

$urlRouterProvider.otherwise("/home");
$stateProvider
    // Homepage:
    .state("app", {
        url: "/:lang",
        params: {squash: true, value: 'en'}
        abstract: true,
        template: '<ui-view/>'
    })


    .state("app.home", {
        url: "/home",
        templateUrl: "common/views/main.html"
    });

请注意，这不包括生成的路由中的默认值，因此即使/en/home有效，与ui-sref='app.home({lang:"en"})'的链接也会产生/home，而不是/en/home。当$ stateParams.lang为null时，您可以设置value: null并在语言选择逻辑中使用"en"作为默认值。

如何使用$ stateProvider使语言参数可选？

2 个答案: