AngularJS UI 路由器-无需重新加载状态更改 URL

您可以简单地使用 $state.transitionTo 而不是 $state.go 。 $state.go 在内部调用 $state.transitionTo ，但自动将选项设置为 { location: true, inherit: true, relative: $state.$current, notify: true } 。您可以调用 $state.transitionTo 并设置 notify: false 。例如:

$state.go('.detail', {id: newId})

可以被

$state.transitionTo('.detail', {id: newId}, {
location: true,
inherit: true,
relative: $state.$current,
notify: false
})

编辑: 正如 fraz 建议的那样，它可以简单地是:

$state.go('.detail', {id: newId}, {notify: false})

这个设置为我解决了以下问题:

• 在将 URL 从 .../更新到 .../123时，不会调用训练控制器两次
• 当导航到另一个状态时，不再调用训练控制器

状态配置

state('training', {
abstract: true,
url: '/training',
templateUrl: 'partials/training.html',
controller: 'TrainingController'
}).
state('training.edit', {
url: '/:trainingId'
}).
state('training.new', {
url: '/{trainingId}',
// Optional Parameter
params: {
trainingId: null
}
})

调用 state (来自任何其他控制器)

$scope.editTraining = function (training) {
$state.go('training.edit', { trainingId: training.id });
};


$scope.newTraining = function () {
$state.go('training.new', { });
};

培训总监

var newTraining;


if (!!!$state.params.trainingId) {


// new


newTraining = // create new training ...


// Update the URL without reloading the controller
$state.go('training.edit',
{
trainingId : newTraining.id
},
{
location: 'replace', //  update url and replace
inherit: false,
notify: false
});


} else {


// edit


// load existing training ...
}

在这个问题上花了很多时间之后，以下是我得到的工作

$state.go('stateName',params,{
// prevent the events onStart and onSuccess from firing
notify:false,
// prevent reload of the current state
reload:false,
// replace the last record when changing the params so you don't hit the back button and get old params
location:'replace',
// inherit the current params on the url
inherit:true
});

我在很久以前的版本: v0.2.10的 UI-router 中就是这样做的:

$stateProvider
.state(
'home', {
url: '/home',
views: {
'': {
templateUrl: Url.resolveTemplateUrl('shared/partial/main.html'),
controller: 'mainCtrl'
},
}
})
.state('home.login', {
url: '/login',
templateUrl: Url.resolveTemplateUrl('authentication/partial/login.html'),
controller: 'authenticationCtrl'
})
.state('home.logout', {
url: '/logout/:state',
controller: 'authenticationCtrl'
})
.state('home.reservationChart', {
url: '/reservations/?vw',
views: {
'': {
templateUrl: Url.resolveTemplateUrl('reservationChart/partial/reservationChartContainer.html'),
controller: 'reservationChartCtrl',
reloadOnSearch: false
},
'viewVoucher@home.reservationChart': {
templateUrl: Url.resolveTemplateUrl('voucher/partial/viewVoucherContainer.html'),
controller: 'viewVoucherCtrl',
reloadOnSearch: false
},
'addEditVoucher@home.reservationChart': {
templateUrl: Url.resolveTemplateUrl('voucher/partial/voucherContainer.html'),
controller: 'voucherCtrl',
reloadOnSearch: false
}
},
reloadOnSearch: false
})

如果您只需要更改 url 但不需要更改状态:

使用以下命令更改位置(如果希望在历史记录中进行替换，则添加. Change) :

this.$location.path([Your path]).replace();

防止重定向到您的状态:

$transitions.onBefore({}, function($transition$) {
if ($transition$.$to().name === '[state name]') {
return false;
}
});

试试这个

$state.go($state.$current.name, {... $state.params, 'key': newValue}, {notify: false})

呼叫

$state.go($state.current, {myParam: newValue}, {notify: false});

将仍然重新加载控制器，这意味着您将 丢失状态数据。

为了避免这种情况，只需将参数声明为动态的:

$stateProvider.state({
name: 'myState',
url: '/my_state?myParam',
params: {
myParam: {
dynamic: true,    // <----------
}
},
...
});

然后你甚至不需要 notify，只需要打电话

$state.go($state.current, {myParam: newValue})

够了，太棒了！

来自 文件:

当 dynamic为 true时，对参数值的更改将 不会导致进入/退出状态。解析将不会 重新获取，也不会重新加载视图。

这对于构建 组件在参数值更改时更新自身的 UI。

在角2中，RezKesh 的公认答案翻译如下:

this.uiRouter.stateService.go(
"home.myRouteState",
{
"param1": this.myParam1,
"param2": this.myParam2
},
{ notify: false }
);

假设您已经像下面这样在组件的构造函数中注入了 UIRout:

constructor(
private uiRouter: UIRouter
) { }