Betrachten Sie den folgenden Service:

@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));
        });
    }
}

Jedes Mal, wenn sich die Route ändert, wird console.log() ausgelöst. Unabhängig von der Route lautet der Wert jedoch immer "" (leere Zeichenfolge).

Was ist hier falsch?

13
Code Whisperer 17 Apr. 2018 im 18:09

4 Antworten

Beste Antwort

Die Definition der ActivatedRoute lautet:

Enthält Informationen zu einer Route, die einer in eine Steckdose geladenen Komponente zugeordnet ist. Eine ActivatedRoute kann auch verwendet werden, um den Router-Statusbaum zu durchlaufen.

Das heißt, wenn Sie es in den Dienst einfügen, erhalten Sie das ActivatedRoute von der AppComponent. Welches würde immer den Pfad von "" haben.

Sie können den Statusbaum durchlaufen, um die zuletzt aktivierte Route wie zu finden

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)
14
Tomasz Kula 13 März 2019 im 06:14

Wenn Sie die aktuelle URL abrufen möchten, können Sie den Standortimport wie unten beschrieben aus Angular / Common importieren

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

constructor(public location: Location ){ }

let currentUrl = this.location.path();

Kann im NavigationEnd-Abonnenten verwendet werden

6
Veluria 21 Mai 2019 im 18:57

Der Winkelrouter sendet die Parameter an die Zielkomponente, und nur er kann diese Parameter lesen.

Sie können jedoch Router-Ereignisse in Diensten wie RoutesRecognized verwenden, um auf die URL-Parameter zuzugreifen.

3
shubham agarwal 17 Apr. 2018 im 15:31

Ich sehe viele Antworten, aber ich denke, der folgende Code könnte eine "poliertere" Lösung sein. Alle erforderlichen Werte können so zugeordnet werden, dass sie Ihren Anforderungen entsprechen.

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)
    )
}

Mit folgender Funktion einsatzbereit:

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
            }})
        );
   }
}
0
Nils Coussement 21 Juni 2019 im 15:28