Question

我正在使用带有Angular 1.6的ui-router。根状态是站点语言（/ en，/ nl，/ de）。

对于所有语言，大多数子州都是相同的。但是，对于某些州，儿童州的名称已被翻译：

/en/english-state/common-state
/nl/dutch-state/common-state
/de/german-state/common-state

如何确保中间状态始终与父状态中的lang参数（en / nl / de）匹配？我想在不提供中间状态的情况下使用ui-sref;这应该根据语言自动填写。当中间状态与父状态中的语言不匹配时，应该自动更改它以匹配父状态中的语言。

我无法在ui-router文档中找到直观的解决方案，但也许我错过了一些东西。有人这么做过吗？

Answer 1

过了一会儿，我决定像这样解决它，我认为这是最干净的方法：

（注意：这是一个简化版本。我已经用字符串替换了函数，省略了依赖关系和删除了行，这是不工作的代码，它是关于这个想法的。）

将语言变量暴露在根状态的解析部分中，如下所示：

$stateProvider.state({
    url: '/{lang:(?:en|nl|de)}',
    name: 'root',
    [ ... ]
    resolve: {
        language: function() { return $stateParams.lang }
    }

在子状态中，检查URL是否与语言匹配：

$stateProvider.state({
    url: '/{mySlug:(?:english-state|dutch-state|german-state|__my-state__)}',            
    name: 'root.child',
    resolve: {
        checkSlug: function () {
            $timout(function() {

                if (notMatchesLanguage($stateParams.mySlug, language)) {
                        var params = JSON.parse(JSON.stringify($stateParams));
                        params.mySlug = correctSlug;

                        $state.transitionTo($state.current.name, params, { notify: false });
                }
            }
        }
    }

请注意mySlug列表中添加的slug，__ my-state_ _
现在在每个ui-sref或$ state.go中，我们可以使用__my-state_作为mySlug参数。这个奇怪的slu will不会与任何语言相匹配，将被匹配的状态slug取代。

Angular ui-router。基于父状态参数的子状态参数

1 个答案: