web-dev-qa-db-ja.com

Angular UIルーター-親の状態パラメーターにアクセス

素晴らしいUIルーターを使用したAngularアプリがあります。

私の設定は次のようになります：

.config( function ($stateProvider, $urlRouterProvider) {

    $stateProvider

    // PROJECT DETAIL
    .state('project', {
        url: '/project/:projectId/',
        resolve: {
            /* some base api calls */
        },
        views: {
            'task-list': {
                templateUrl: 'partials/task_list.tmpl.html',
                controller: 'TaskListCtrl',
                resolve: {
                    tasks: function ($stateParams, ConcernService) {
                        return ConcernService.get('project-tasks/', $stateParams.projectId);
                    },
                }
            },
            'concern-instance': {
                /* some resolved variables */
            }
        }
    })
    .state('project.task', {
        url: 'task/:taskId/',
        views: {
            'concern-instance@': {
                /* some different resolved variables */
            },
        }
    })

これはすべてバターのように機能します。ただし、状態task_listのproject.taskテンプレートでは、taskIdパラメータにアクセスできるようにしたいので、URLが#/project/123/task/456/の場合でも、アクティブなナビゲーションリンクを強調表示できます。taskIdは空です。これは、テンプレートがその状態に対して宣言されたパラメータにしかアクセスできないためだと理解しています。したがって、taskIdをproject.task状態にしたい場合は、どうすればよいですか？ task-listでproject.taskを再宣言する必要がありますか？

angularjsangular-uiangular-routing
18
Darwin Tech

UIで-ルーターのドキュメント ここ 彼らはそれを説明しています

「$ stateParamsオブジェクトには、その状態で登録されたパラメーターのみが含まれます。」

親のresolveプロパティを使用してのみ、子状態の親状態パラメーターにアクセスできます。

これを「プロジェクト」状態（親）に置きます：

...    
resolve: {
    // Expose projectId parameter to child states
    projectId: ['$stateParams', function ($stateParams) {
        return $stateParams.projectId;
    }]
},

次に、状態 'project.task'（子）のコントローラー内で両方にアクセスできる必要があります

$stateParams.projectId

そして

$stateParams.taskId
14
goodies4uall

わたしは気付いた $state.paramsには子の状態パラメータが含まれます。ドキュメントが見つからないようです。それはうまくいく

4
Ladmerc