Question

考虑以下服务，

@Injectable()
export class SagasService {
    constructor(private route : ActivatedRoute, private router : Router ){
    router.events
        .filter(e => e instanceof NavigationStart)
        .subscribe(e=>{
            route.url.subscribe(a=>console.log(a[0].path));
        });
    }
}

每次路线发生变化时，console.log()都会触发。但是，无论路由是什么，值始终为""（空字符串）。

这里有什么问题？

Answer 1

ActivatedRoute的定义是：

包含与插座中加载的组件关联的路线的信息。 ActivatedRoute也可用于遍历路由器状态树。

这意味着如果您在服务中注入它，您将从AppComponent获取ActivatedRoute。哪个路径总是""。

您可以遍历状态树以查找最后激活的路径，如

this.router.events.pipe(
 filter(event => event instanceof NavigationEnd),
 map(() => this.activatedRoute),
 map(route => {
   while (route.firstChild) {
    route = route.firstChild;
   }
   return route;
  }),
  map(route => route.url)
 )
.subscribe( // ... do something with the url)

Answer 2

如果您想获取当前网址，可以从angular / common导入位置导入，如下所示

import {Location} from '@angular/common';

constructor(public location: Location ){ }

let currentUrl = this.location.path();

可以在NavigationEnd订阅者

中使用

Answer 3

角度路由器将参数发送到目标组件，只有它才能读取这些参数。

但是，您可以使用RoutesRecognized等服务中的路由器事件来访问url参数。

Answer 4

我看到了很多答案，但是我认为以下代码可能是更“精细”的解决方案。所有必需的值都可以按照您的需求进行映射。

export class AppTitleComponent implements OnInit, OnDestroy {
public id$ : Observable<number>;

constructor(
    private _router: Router,
    private _activatedRoute : ActivatedRoute
) { }

ngOnInit() {
    this.id$ = GeneralFunctions.GetRouteValues({
        router : this._router,
        activatedRoute : this._activatedRoute
    }).pipe(
      map( d => +d.params.id)
    )
}

具有以下可供使用的功能：

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, Params, Data } from '@angular/router';
import { filter, map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable()
export class GeneralFunctions {
   constructor() {
   }

   public  static GetRouteValues({router, activatedRoute}: { 
        router: Router; 
        activatedRoute: ActivatedRoute; 
    })  : Observable<{
        route: ActivatedRoute;
        params: Params;
        data: Data;
    }> {
        return router
            .events
            .pipe(
                filter(e => 
                e instanceof NavigationEnd
            ),          
                map(() => 
                activatedRoute
            ),          
            map(route => {
                if (route.firstChild) {
                    route = route.firstChild;
                }
                return route;
            }),
            filter(route => 
                route.outlet === 'primary'
            ),
            map(route => { return  {
                route : route,
                params : route.snapshot.params,
                data : route.snapshot.data
            }})
        );
   }
}

激活的路线URL始终为空

4 个答案: