Angular 8 - 导航到同一路由路径时处理路由订阅

Question

我正在从后端应用程序接收路由通知，以加载 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”。 .

如有任何帮助或建议，我将不胜感激。

Answer 1

见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'];
  });
}

Answer 2

您可以使用

  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]);

Answer 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 => {
})

Angular 8 - 导航到同一路由路径时处理路由订阅

Angular 8 - Process Route subscription when navigates to same route path

routes

typescript

angular-routing

angular

angular-router