Angular 1 ui-router 1.0.24:以编程方式更改URL，无需重新加载控制器，保留历史记录和手动更改U

Question

我想将页面 url 与使用 ui-router 1.0.24 的角度 1 页面的内部状态保持同步。

更改页面过滤器时，将重新加载页面数据，然后调用$state.transitionTo((以将 url 与新过滤器同步：

$state.transitionTo($state.current.name, self.getPageParams(), { /*location: 'replace',*/ reload: false, inherit: false, notify: false, custom: {urlChangedAfterReload: true} });

页面状态定义为：

$stateProvider
.state('page', {
url: '/Page/:dateParam/:modeParam',
params: {
dateParam: {value: null, dynamic: false},
modeParam: {value: 'READ', dynamic: false}
},
...
})

我试图将参数标记为动态(动态：true(：该选项避免控制器重新加载，但同时不允许手动更改 url 并且不允许使用历史记录(参数是动态的，因此 ui-router 忽略它们的更改(。

只有当我以编程方式更改 url 时，才可以启用动态选项，当用户手动、历史记录或链接更改 url 时保持禁用状态？

Answer 1

我找到了解决方案。

在更改 url 之前，我将当前页面的所有参数设置为动态(因此不会重新加载控制器(。

this.reload = function() {
...
$log.info('Updating url');
const pageParams = $stateRegistry.states[$state.current.name].params;
Object.keys(pageParams).forEach(paramName => pageParams[paramName].dynamic = true);
$state.transitionTo($state.current.name, this.getPageParams());
};

然后，当转换完成时，我将动态参数设置为 false(因此，如果用户将更改 url 或使用浏览器历史记录，页面将被重新加载(。 当参数更改时调用onSuccess，否则调用onError。

this.$onInit = function () {
...
const uiRouterOnSuccess = $transitions.onSuccess({}, () => {
$log.info('onSuccess');
const pageParams = $stateRegistry.states[$state.current.name].params;
Object.keys(pageParams).forEach(paramName => pageParams[paramName].dynamic = false);
return true;
});
const uiRouterOnError = $transitions.onError({}, () => {
$log.info('onError');
const pageParams = $stateRegistry.states[$state.current.name].params;
Object.keys(pageParams).forEach(paramName => pageParams[paramName].dynamic = false);
return true;
});
$log.info('$onInit');
$scope.$on('$destroy', () => {
$log.info('$destroy');
uiRouterOnSuccess();
uiRouterOnError();
});
};

getPageParams使用筛选器值更新参数。

this.getPageParams = function() {
const params = $state.current.params;
params.dateParam = xxx;
params.modeParam = yyy;
return params;
};