Angular js - route-ui 添加默认参数 [英] Angular js - route-ui add default parmeter

问题描述

在我的应用中，我使用了 angular UI-Router.

In my app I use angular UI-Router.

我有当地人(英语和希伯来语)我的基本语言是英语.

I have locals (English and Hebrew) My base language is English.

这就是为什么我希望如果语言是英语不要将参数添加到 url

Thats why i want if the language is English not to add the parameter to the url

例如:

• 家庭英语 --> http://example.com/

• 家庭希伯来语 --> http://example.com/he/

关于我们 英文 --> http://example.com/about

About us English --> http://example.com/about

这可能吗?

这是我当前的代码

$stateProvider
        .state('/', {
            url: "/",
            templateUrl: "Assets/app/templates/home.html",
            controller: 'homeController'
        })
        .state('activity', {
            url: "/activity",
            templateUrl: "Assets/app/templates/gallery.html",
            controller: 'galleryController'
        })
        .state('page', {
            url: '/:pagename',
            templateUrl: "Assets/app/templates/page.html",
            controller: 'pageController'
        });

推荐答案

有一个工作plunker

一如既往，使用 UI-Router 是可行的 - 内置功能.首先，我们将引入名为root"的超级父状态.它会定义参数 lang

As always, that is feasible with UI-Router - built in features. Firstly, we'd introduce the super parent state called for example 'root'. It would have defined parameter lang

.state('root', {
    url: '/{lang:(?:en|he|cs)}',
    abstract: true,
    template: '<div ui-view=""></div>',
    params: {lang : { squash : true, value: 'en' }}
})

有趣的事情:url 使用正则表达式来减少匹配的语言词的数量(在我们的例子中，英语、希伯来语和捷克语) :

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

阅读更多信息，例如这里.

此外，我们确实受益于名为 params : {} 的设置.它说，默认值是 'en' 更重要的是 - 如果与 'en' 参数值匹配，它应该被压缩，跳过:

Also, we do profit from a setting called params : {}. It says, that the default value is 'en' and what is more important - it should be squashed, skipped if there is a match with 'en' param value:

params: {lang : { squash : true, value: 'en' }}

阅读更多信息，例如这里或这里

所以，这是我们的父级，根状态，我们只是将其应用于具有状态定义设置的所有状态 parent : 'root':

So, this is our parent, root state, which we just would apply to all states with a state definition setting parent : 'root':

.state('home', {
    parent: 'root', // parent will do the magic
    url: "/",
    templateUrl: "Assets/app/templates/home.html",
    controller: 'homeController'
})
.state('activity', {
    parent: 'root', // parent magic
    url: "/activity",
    templateUrl: "Assets/app/templates/gallery.html",
    controller: 'galleryController'
})
.state('page', {
    parent: 'root', // magic
    url: '/page/:pagename',
    templateUrl: "Assets/app/templates/page.html",
    controller: 'pageController'
});

现在这些链接可以工作了:

And now these links would work:

ui-sref 英文:

<a ui-sref="home({lang: 'en'})">home({lang: 'en'})</a>
<a ui-sref="activity({lang: 'en'})">activity({lang: 'en'})</a>
<a ui-sref="page({pagename:'one', lang: 'en'})">page({pagename:'one', lang: 'en'})</a> 

ui-sref 希伯来语:

<a ui-sref="home({lang: 'he'})">home({lang: 'he'})</a>
<a ui-sref="activity({lang: 'he'})">activity({lang: 'he'})</a>
<a ui-sref="page({pagename:'two', lang: 'he'})">page({pagename:'two'})</a>

href 英语:

<a href="#/">#/</a>
<a href="#/activity">#/activity</a>
<a href="#/page/three">#/page/three</a>

href 希伯来语:

<a href="#/he/">#/he/</a>
<a href="#/he/activity">#/he/activity</a>
<a href="#/he/page/three">#/he/page/three</a>

在此处查看在此操作

这篇关于Angular js - route-ui 添加默认参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！