Angular 4 : 捕捉浏览器按钮点击和更新页面

Question

我是 angular 4 的新手，遇到用户单击后退或前进浏览器按钮时页面不会刷新的问题。 url 中的查询参数根据历史记录更改，但页面不会刷新以前的结果。例如 /search?text="ret" 和后退按钮变成 /search?text=ben&tab=doc.

需要在单击浏览器按钮时刷新 'search' 路由。尝试使用捕获点击但无法刷新页面的 Location popstate 事件。

设置 window.location.href 有效，但会重新加载页面。 ngrx router-store 可以作为解决方案吗？

https://github.com/ngrx/platform/blob/v4.1.1/docs/router-store/api.md

Answer 1

据我了解，您实际上不需要刷新页面。这就是单页应用程序的全部内容。相反，尝试在 location.onPopState 处理程序中主动更改页面。您甚至可以在那里执行 router.navigate 或解析弹出的查询参数，获取并重新填充搜索结果。您已经知道新位置，因此根据这些知识采取行动 in-process。

Answer 2

当路由的路径保持不变，但查询参数或路由参数是动态的（改变）时，当前组件不会被销毁并重新初始化。那是除非你标记路由器这样做（Router.onSameUrlNavigation（'reload'）——见https://angular.io/api/router/Router）。

对于您的情况，您应该订阅路由的查询参数，并在发出新参数时做出反应。

例如

subscriptions: Subscription[] = [];

constructor(private route: ActivatedRoute) { }

ngOnInit() {

    this.subscriptions.push(this.route.queryParamMap.subscribe(queryParamMap => {
        const text = queryParamMap.get('text');
        const doc = queryParamMap.get('doc');

        this.updateView(text, doc);
    }));
}

ngOnDestroy() {
    this.subscriptions.forEach(s => s.unsubscribe());
}

仅当您知道不需要处理动态 route/query 参数时才使用 route.snapshot 作为快捷方式。

Angular 4 : 捕捉浏览器按钮点击和更新页面

Angular 4 : Catch back and forward browser button click and update page

angular

angular4-router