Angular 7：刷新页面上的参数更改

Question

我已在Angular 7中创建了该应用程序。在导航部分中，当浏览器URL中的参数更改时，页面不会刷新。

例如：

用户单击学科菜单项，页面网址看起来像 http://localhost:4200/xxx/disciplines

用户单击“学科”页面中的表行项目，URL看起来像 http://localhost:4200/xxx/disciplines?disciplineId=1150

当用户再次单击“学科”菜单项时，URL在浏览器URL中正确更改，例如http://localhost:4200/xxx/disciplines，但是页面没有刷新/重新加载。

请专家提供建议吗？

Answer 1

您需要使用来自Angular路由器的ActivatedRoute：

  

从'@ angular / router'导入{ActivatedRoute};

此时您只需要将其注入到组件的构造函数中即可：

  

构造函数（私有路由：ActivatedRoute）

在ngOnInit中，您只需要订阅在路线上发生的更改：

  

this.routeSubscription = this.route.params.subscribe（（param：any）=> {
        this.id = param ['disciplineId'];
        this.yourSpecialFunction（）;
}）;

重要提示：我总是创建一个订户属性：

  

import { Subscription } from 'rxjs';
  ...
  ...
  导出类YourComponent实现OnInit，OnDestroy {
  私人路线订阅：订阅

确保组件实现OnDestroy并在ngOnDestroy（）方法中实现：

  

ngOnDestroy（）{       this.routeSubscription.unsubscribe（）;     }

您必须取消订阅应用程序中的每个订阅，以避免内存泄漏。

有关更多订阅信息，请参阅Tomas Trajan的这篇文章：https://blog.angularindepth.com/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0