UI-Router for 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-Router 本身的更改。

  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 来重现该问题。该问题在组件colors.component.tslink 中进行了描述。在这个 plunker 中，即使我选中/取消选中复选框，我也不想重新加载页面。

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

感谢任何帮助。

Answer 1

您可以使用Location.replaceState()更新网址

见：replaceState()

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

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

Location 中还有其他有用的方法，比如Path，你可能想参考一下。