选项 url 路径 UI-Router [英] Option url path UI-Router

问题描述

在我的 Angular 应用程序中，我在 UI-Router 中大量使用嵌套状态.

In my angular application, I am making heavy use of nested states with UI-Router.

我正在尝试创建一个父状态，该状态根据具有可选区域设置路径的 URL 确定应用程序的区域设置.

I am trying to create a parent state that determines the locale of the application based on a URL that has an optional locale path.

• 西班牙语www.website.com/es/search
• 英文版www.website.com/search

'/es' 西班牙语是必需的，但缺少参数暗示英语，我宁愿没有 '/en'.

我希望此状态的任何子状态都继承该区域设置值.

I want any child state of this one to inherit that locale value.

$stateProvider
    .state('localization', {
        abstract: true,
        url: '/:locale?',
        params: {
            locale: { value: 'en' }
        }
    })
    .state('search', {
        url: '/search',
        parent: 'localization'
    });

我希望能够在任何子状态中使用 $stateParams.locale.

I'd like to be able to use $stateParams.locale in any of the child states.

推荐答案

几乎一样的 Q &A: Angular js - route-ui 添加默认参数 或 另一个在这里

There is almost the same Q & A: Angular js - route-ui add default parmeter or another here

解决方案是像这样创建根状态:

The solution is to create root state like this:

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

任何子状态都可以将其用作父状态:

Any child state then can just use this as a parent:

.state('home', {
    parent: 'localization', // parent will do the magic
    url: "/",
    ...
})
.state('activity', {
    parent: 'localization',
    ...

在这里查看，这里也是完全工作的plunker

Check it here, where is also fully working plunker

这篇关于选项 url 路径 UI-Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！