UI-Angular 的路由器：是否可以在不重新加载页面的情况下更新位置

Question

我正在将一个应用程序从 AngularJs 迁移到 Angular 7. 在旧的 ui-router 中，我能够更新位置而无需使用以下代码重新加载状态。

        this.syncLocation = function (paramObj) {
            var params = _.clone($state.params);
            params = _.merge(params, paramObj);

            $state.transitionTo($state.current.name, params, {
                location: true,
                notify: false
            });
        };

但是使用新的 Angular 和 UI-Router 我无法完成这项工作。不确定是由于更改检测策略还是 UI-路由器本身的更改。

  syncLocation(paramObj) {
    console.log("syncLocation", paramObj);
    let params = _.clone(this.stateService.params);
    params = _.merge(params, paramObj);

    this.stateService.go(this.stateService.current.name, params, {
      reload: false
    });
  }

我创建了 plunker to reproduce the problem. The problem is described in the component colors.component.ts link。在这个 plunker 中，我不想重新加载页面，即使我 check/uncheck 复选框。

我的想法是我有一个复杂的页面，我不能通过重新加载页面来丢失内容，但仍然能够更新位置。这是一个有问题的简化页面。

感谢任何帮助。

Answer 1

您可以将 url 更新为 Location.replaceState()

参见：replaceState()

用 di 注入 Location 并像这样使用：

constructor(private location: Location) {
...
  private syncLocation(){
    this.location.replaceState(`whatever/state/or/path/you/need`);
  }
}

Location中还有其他有用的方法，例如Path，您可能需要参考。

UI-Angular 的路由器：是否可以在不重新加载页面的情况下更新位置

UI-Router for Angular: Is it possible to update location without reloading the page

angularjs

angular-ui-router