javascript - Angular UI-router - 在更多状态下保留 url 参数

Question

我正在尝试使用 UI-router 构建一个类似于 Google Analytics 的应用程序。在第一页上有许多网站配置文件，当我选择一个配置文件时，无论我在哪个 GA 页面(报告、自定义、管理)，其 id 都会保留在 url 中。

我不知道如何使用 UI 路由器来完成此操作。最简单的答案可能是将个人资料 ID 放入每个状态 url 以及部分 View 中的每个链接中。这将很难维护。

我想在网址中保留个人资料 ID 有两个原因:

• 启用书签和页面刷新
• 允许用户在不同的浏览器选项卡中使用不同的配置文件

这样做的正确方法是什么？

Answer 1

你可以这样做:

– 像这样定义状态

.state('yourState', {
    url: 'state/:paramOne/:paramTwo',
    templateUrl: 'yourstate.html',
    controller: 'YourStateCtrl'
})

– 使 $stateParams 在您的 View 中可访问

app.run(function ($rootScope, $state, $stateParams) {
    $rootScope.$stateParams = $stateParams;
});

– 将当前的 $stateParams 值应用于 View 中的链接；如果尚未定义 - 使用默认值(可能是 $rootScope.defaultParamOne = ''; $rootScope.defaultParamTwo = ''; )

<a ui-sref="yourState({
    paramOne: $stateParams.paramOne || defaultParamOne, 
    paramTwo: $stateParams.paramTwo || defaultParamTwo
})">your state</a>

这样 ui-router 将从当前 url 获取参数并使用它来构建链接。