角度用户界面路由器。基于父状态参数的子状态参数答案

【问题标题】：Angular ui-router. Child state parameter based on parent state parameter角度用户界面路由器。基于父状态参数的子状态参数
【发布时间】：2017-06-21 08:57:42
【问题描述】：

我正在使用带有 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 文档中找不到直观的解决方案，但也许我遗漏了一些东西。以前有人做过吗？

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案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 参数。这个奇怪的 slug 不会匹配任何语言，将被匹配的状态 slug 替换。

【讨论】：