AngularJS: 在URL中可选的语言参数

17 浏览
0 Comments

AngularJS: 在URL中可选的语言参数

我正在使用angularjs和UI-Router。我想配置指定选择的语言的路由，但是路由的这一部分应该是可选的。

我有以下状态：

{

state: 'app',

config: {

abstract: true,

url: '/{lang:(?:de|en)}',

template: ''

}

}

{

state: 'app.mainview',

config: {

url: '/mainview',

templateUrl: 'app/mainview/mainview.html',

controller: 'MainviewController',

controllerAs: 'vm',

title: 'Main View',

settings: {

pos: 1,

displayName: 'Mainview',

icon: 'code-array'

}

}

}

现在只能通过以下方式导航到mainview：

example.com/en/mainview

但是我想配置ui-router，使得以下所有路由都有效：

example.com/mainview

example.com/en/mainview

example.com/de/mainview

我可以在开头设置一个可选的语言参数路由而不使用双斜杠吗？如果不行，你有什么其他建议？

0

1 答案

0 Comments

问题的原因是在AngularJS中，当我们想要在URL中添加可选的语言参数时，无法实现在不刷新页面的情况下改变语言参数的值。

解决方法是通过在路由中引入父状态来实现。具体的解决方案可以在以下链接中找到：

1. [Angular js - route-ui add default parmeter](https://stackoverflow.com/q/31459394/1679310)

2. [Prepend optional attribute in angular ui-router URL](https://stackoverflow.com/a/31837507/1679310)

在这些链接中，我们可以看到通过引入父状态来解决这个问题。在父状态中，我们可以定义一个可选的语言参数，并设置默认值。以下是一个示例代码：

.state('root', {
    url: '/{lang:(?:en|de|cs)}',
    abstract: true,
    template: '
',
    params: {lang : { squash : true, value: 'en' }}
})

通过这样的设置，我们可以在任何状态中改变语言参数的值，而无需刷新页面。例如，我们可以将URL从`/en/hello`改变为`/de/hello`，而不会刷新页面。

0