Angular 1 ui-router 1.0.24: изменение URL-адреса программно без перезагрузки контроллера, сохранение истории и изменение URL-адреса вручную

Question

Я бы хотел синхронизировать URL страницы с внутренним состоянием страницы angular 1, использующей ui-router 1.0.24.

При изменении фильтра страницы данные страницы перезагружаются , затем вызывается $ 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}
      },
      ...
    })

Я попытался пометить параметры как Dynami c (с Dynami c: true ): эти параметры позволяют избежать перезагрузки контроллера, но в то же время не позволяют изменить URL-адрес вручную и не позволяет использовать историю (параметры являются Dynami c, поэтому UI-маршрутизатор игнорирует их изменение).

Можно включить параметры Dynami c только при программном изменении URL , оставив его отключенным, когда пользователь изменяет URL-адрес вручную, по истории или по ссылке?

Answer 1

Я нашел решение.

Прежде чем изменить URL, я установил все параметры текущей страницы как динамические c (чтобы контроллер не был перезагружен).

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());
};

Затем, когда переход завершен, я установил параметр Dynami c в значение 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;
};