Angular 8 - 导航到相同的路由路径时处理路由订阅答案

【问题标题】：Angular 8 - Process Route subscription when navigates to same route pathAngular 8 - 导航到相同的路由路径时处理路由订阅
【发布时间】：2020-06-26 07:15:47
【问题描述】：

我正在从后端应用程序接收路由通知，以加载 Angular 组件。示例：

// Current route "/example1/path1"
let route = "/example2/path1"; //route received from back-end
this.router.navigate([route]); // OK: navigates to component associated to "/example2/path1" path

此外，在每个组件中，我都在订阅中处理路由通知：

this.route.params.subscribe(params => {
...
            }
        });

尽管如此，我在某些接收到的路线上导航到同一组件时遇到了一些麻烦，比如说：

// Current route "/example1/path1"
let route = "/example1/path1"; //route received from back-end (SAME ROUTE PATH)
this.router.navigate([route]); // NOK: route notification not received in subscription

我的问题是：当应用程序需要导航到相同的路线时，是否有任何方法可以接收此订阅通知？查询参数对我来说是一个有效的解决方案，例如：“/example1/path1?timestamp=1234567”，但是我不知道如何在不创建单独的解析方法的情况下分别解析“timestamp”和“path1”......

如果您对此提供任何帮助或建议，我将不胜感激。

【问题讨论】：

标签： angular typescript routes angular-routing angular-router

【解决方案1】：

你可以使用

  window.location.href = path

但总的来说，您应该避免“重新加载所有应用程序”。也就是说，使用辅助功能并调用订阅或其他方式

this.route.params.subscribe(params => {
    this.initialize(params)
})

initialize(param){
  ..what ever..
}

那么，

let route = "/example1/path1"; //route received from back-end (SAME ROUTE PATH)
if (route==this.router.url)
  this.initialize("path1")
else
   this.router.navigate([route]);

【讨论】：

如何在 initialize(route){} 中从头开始初始化组件？没有 this.router.navigate 有没有办法重新加载组件？
当你“重新加载一个组件”时你想做什么？如果只显示新数据，只需要刷新.ts中的数据即可。真的我不认为你想再次 ngDestroy 和 ngCreate 组件

【解决方案2】：

见https://angular.io/guide/router#getting-route-information

this.router.navigate(["/example1/path1"],{timestamp: 1234567});

import {ActivatedRoute} from "@angular/router";

constructor(private route: ActivatedRoute) {} 

ngOnInit() {
 // "/example1/path1?timestamp=1234567"
  this.route.params.subscribe(params => {
    this.timestamp = params['timestamp'];
  });
}

【讨论】：

this.router.navigate(["/example1/path1?timestamp=1234567"]);之后没有收到通知
试试this.router.navigate(["/example1/path1"],{timestamp: 1234567});更多信息angular.io/guide/router#specifying-a-relative-route@AlbertoBricio
抱歉，执行 this.router.navigate(["/example1/path1"],{timestamp: 1234567}); 后，当用户在同一路由路径时，时间戳值不同，这.route.queryParams 订阅未通知

【解决方案3】：

最后，这个解决方案对于这个目的是有效的：

private navigateURL(route: string /* URL received from BackEnd*/) {
    let urlTree: UrlTree = this.router.parseUrl(route);
    const fragmentUrl = urlTree.fragment;
    const queryParams = urlTree.queryParams;
    urlTree.fragment = null;
    urlTree.queryParams = {};
    const url = this.router.serializeUrl(urlTree);
    this.router.navigate([url], {queryParams: queryParams, fragment: fragmentUrl });
}

使用ActivatedRoute订阅查询字符串参数：

this.route.queryParams.subscribe(data => {
})

订阅 Fragment：

this.route.fragment.subscribe(data => {
})

【讨论】：