Question

我正在将应用程序从AngularJs迁移到Angular7。在旧的ui路由器中，我能够更新位置，而无需使用以下代码重新加载状态。

        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.ts link中进行了描述。即使选中/取消选中此复选框，我也不想重新加载页面。

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

感谢您的帮助。

Answer 1

您可以使用Location.replaceState()

更新网址

请参阅：replaceState()

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

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

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

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

1 个答案: