So erhalten Sie die aktuelle Route

471

In den aktuellen Dokumenten wird nur über das Abrufen von Routenparametern gesprochen, nicht über die tatsächlichen Routensegmente.

Wenn ich zum Beispiel das übergeordnete Element der aktuellen Route finden möchte, wie ist das möglich?

pdeva
quelle
25
window.location.pathname
Dchacke
1
@dchacke Das Problem window.locationist, dass sie, wenn sie in Zukunft serverseitiges Rendering implementieren möchten, auf einige Schwierigkeiten windowstoßen werden, da es auf dem Node.js-Server nicht vorhanden ist, sie jedoch die Angular-Standardmethoden verwenden müssen, um auf die Route zuzugreifen und sie werden sowohl auf dem Server als auch auf dem Browser in Ordnung sein.
Mohammad Kermani
Ja, macht Sinn. Diejenigen, die serverseitiges Rendering verwenden oder planen, dies zu berücksichtigen, sollten dies berücksichtigen.
dchacke

Antworten:

522

Der neue V3-Router verfügt über eine URL-Eigenschaft.

this.router.url === '/login'
Victor96
quelle
5
Ich benutze diesen Code und erhalte diese URL in einer Zeichenfolgenvariablen, aber wenn ich versuche, in Konsolenlog zu drucken, wird this.fullUrl = this.router.url console.log (this.fullUrl) nicht gedruckt. // nicht drucken
Vijay Gupta
3
Schauen Sie sich die Verwendung der neuen aktiven Router-Funktion <a routerLink="/dashboard" routerLinkActive="active"> Dashboard </a> an
Victor96
34
Dies ist nutzlos, wenn Sie mit der Hash-Strategie navigieren. Die URL lautet immer "/"
Ninja Coding
5
@ NinjaCoding Ich verwende die Hash-Strategie und bekomme nur "/". Wie kann ich mit Hash eine Routen-URL erhalten?
Murtuza
9
@ Murtuza hier ist eine Lösung : this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });. Stellen Sie sicher, dass Sieimport { Router, NavigationEnd } from '@angular/router';
Gel
160

Winkel RC4:

Sie können importieren Routeraus@angular/router

Dann injizieren Sie es:

constructor(private router: Router ) {

}

Rufen Sie dann den URL-Parameter auf:

console.log(this.router.url); //  /routename
Lowcrawler
quelle
2
Die zusätzliche Klarheit darüber, wie der Router selbst importiert wird, ist sehr hilfreich. Können Sie klären, ob es anders wäre, wenn Sie einen benutzerdefinierten Router verwenden würden?
kbpontius
1
Das würde sicherlich von der "Gewohnheit" des benutzerdefinierten Routers abhängen. (Entschuldigung, dies war kein besonders hilfreicher Kommentar - wenn Sie eine bestimmte Frage haben, würde ich vorschlagen, eine neue Frage zu stellen und auf diese Antwort zu
verweisen
41
Ich habe diese Lösung verwendet, aber ich bekomme immer dieses "/". Weiß jemand warum?
Marcio M.
4
Angular Dependency Injection basiert auf der TypeScript-Zuckersyntax. Wenn Sie also in der Konstruktorsignatur private _router: Router deklarieren, wird in der aktuellen Klasseninstanz automatisch eine Eigenschaft _router erstellt, in die der Router injiziert wird. Diese Anweisung this.router = _router; ist für mich nur ein Overhead, da Sie zwei Verweise auf dieselbe Objektinstanz haben würden (in diesem Fall den Router).
Andrew Reborn
1
@Marcio M. Möglicherweise liegt es daran, dass der Router diesen Status nicht erreicht hat, obwohl die URL anders angezeigt wird. Zum Beispiel, wenn Sie sich die router.url in einem Wachdienst ansehen. location.path (), wie in den Antworten erwähnt, gibt Ihnen die URL, unabhängig vom Router-Status.
Daniel van Niekerk
61

Injizieren Sie Locationin Ihre Komponente und lesen location.path(); Sie Sie müssen ROUTER_DIRECTIVESirgendwo hinzufügen, damit Angular aufgelöst werden kann Location. Sie müssen import: [RouterModule]dem Modul hinzufügen .

Aktualisieren

Im V3 (RC.3) -Router können Sie ActivatedRoutemithilfe seiner snapshotEigenschaft weitere Details einfügen und darauf zugreifen .

constructor(private route:ActivatedRoute) {
  console.log(route);
}

oder

constructor(private router:Router) {
  router.events.subscribe(...);
}

Siehe auch Angular 2-Router-Ereignis-Listener

Günter Zöchbauer
quelle
3
das gibt mir den 'url'-Pfad. Wie finde ich die 'Routennamen', damit ich sie in einem Array navigatezusammen mit dem (angehängten) Namen der untergeordneten Route, zu der ich navigieren möchte, an die Methode weitergeben kann?
Pdeva
Aha. Ich finde das auch nicht zufriedenstellend. Ich habe es selbst nicht ausprobiert, aber möglicherweise würde der unter stackoverflow.com/a/34548656/217408MyTrackingService erläuterte Zugriff auf diese Werte ermöglichen.
Günter Zöchbauer
Routennamen sind jetzt weg.
Günter Zöchbauer
4
@GunterZochbauer Gibt es eine Möglichkeit, die angeforderte Route abzurufen, bevor sie aktiviert wird? Zum Beispiel, wenn ich will die speichern angeforderten Route innerhalb einer canActivate()Methode, so dass ich zu einer „Login“ Seite umleiten, und dann umleiten zurück , nachdem der Benutzer authentifiziert auf die ursprüngliche Route?
Jewgeni Ananin
1
Kannst du das nicht mit einem canActivate-Wächter machen?
Günter Zöchbauer
42

für neuen Router> = RC.3

Der beste und einfachste Weg, dies zu tun, ist!

import { Router } from '@angular/router';
constructor(router: Router) { 
      router.events.subscribe((url:any) => console.log(url));
      console.log(router.url);  // to print only path eg:"/login"
}
Rajath MS
quelle
Wie unterscheidet sich diese Antwort von der von Lowcrawler?
not2savvy
1
@ not2savvy hatte eine weitere Möglichkeit angegeben, dies durch den Router-Ereignis-Listener herauszufinden, was einigen Leuten half, das zu finden, wonach sie suchen.
Rajath MS
36

Benutze das

import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
    router.events.filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
            console.log(event);
        });
}

Und im main.tsImport

import 'rxjs/add/operator/filter';

BEARBEITEN

Moderne Art und Weise

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });
Vlad
quelle
10
Ist dies wirklich die empfohlene Methode, um zu überprüfen, wohin die aktuelle URL zeigt? Ich argumentiere hier nicht gegen dich. Ich bemerkte jedoch, dass das Routing eine Quelle für viele Änderungen, Aktualisierungen, Verwirrungen usw. ist. Ich hatte erwartet, dass ActivatedRoute hauptsächlich für diesen Zweck verwendet wird, nicht für Router . Vermisse ich vielleicht die Komplexität des Problems?
DonkeyBanana
Ich beziehe mich in den offiziellen Dokumenten auf ActivatedRoute .
DonkeyBanana
1
Zumindest hier ist dies nicht erforderlich. Der Router exportiert den Typ "RouterEvent", der durch die anderen Router-Ereignisse erweitert wird - angle.io/api/router/RouterEvent
chrismarx
1
@chrismarx behoben
Vlad
@DonkeyBanana Wenn Sie es mit verschachtelten Modulen zu tun haben, die ihre eigenen Routen enthalten, dann ja. Bei Verwendung verschachtelter Module und Router (was das Angular Team sogar empfiehlt) ist dies die einzige Möglichkeit, die tatsächliche URL der aktuellen Route abzurufen /. Alle anderen Methoden werden einfach zurückgegeben .
Eagerestwolf
32

Für diejenigen, die noch danach suchen. Unter Angular 2.x gibt es einige Möglichkeiten.

constructor(private router: Router, private activatedRoute: ActivatedRoute){

   // string path from root to current route. i.e /Root/CurrentRoute
   router.url 

    // just the fragment of the current route. i.e. CurrentRoute
   activatedRoute.url.value[0].path

    // same as above with urlSegment[]
   activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path))

   // same as above
   activatedRoute.snapshot.url[0].path

   // the url fragment from the parent route i.e. Root
   // since the parent is an ActivatedRoute object, you can get the same using 
   activatedRoute.parent.url.value[0].path
}

Verweise:

  1. https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
  2. https://angular.io/docs/ts/latest/api/router/index/Router-class.html
  3. https://angular.io/docs/ts/latest/guide/router.html
n4nd0_o
quelle
27

So erhalten Sie die Routensegmente:

import { ActivatedRoute, UrlSegment } from '@angular/router';

constructor( route: ActivatedRoute) {}

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }
ttugates
quelle
14

Sie können mit versuchen

import { Router, ActivatedRoute} from '@angular/router';    

constructor(private router: Router, private activatedRoute:ActivatedRoute) {
console.log(activatedRoute.snapshot.url)  // array of states
console.log(activatedRoute.snapshot.url[0].path) }

Alternative Wege

router.location.path();   this works only in browser console. 

window.location.pathname welches den Pfadnamen gibt.

Jose G Varanam
quelle
update: enabledRoute.snapshot.url ist jetzt ein Observable und Sie müssen es abonnieren.
Sadok Mtir
12

Um die aktuelle Route zuverlässig zu erhalten, können Sie diese verwenden

this.router.events.subscribe(
  (event: any) => {
    if (event instanceof NavigationEnd) {
      console.log('this.router.url', this.router.url);
    }
  }
);
Andrei Diaconescu
quelle
9

Das native windowObjekt funktioniert ebenfalls einwandfrei

console.log('URL:' + window.location.href);
console.log('Path:' + window.location.pathname);
console.log('Host:' + window.location.host);
console.log('Hostname:' + window.location.hostname);
console.log('Origin:' + window.location.origin);
console.log('Port:' + window.location.port);
console.log('Search String:' + window.location.search);

HINWEIS: VERWENDEN SIE DIESES NICHT FÜR DIE SERVERSEITIGE RENDERUNG

Sanket Berde
quelle
1
Seien Sie vorsichtig, wenn Sie serverseitiges Rendering verwenden. Dies wird unterbrochen.
Jason Foglia
7

Kurzversion Wenn Sie Router importiert haben, können Sie einfach etwas wie verwenden

this.router.url === "/ search"

Andernfalls gehen Sie wie folgt vor

1) Importieren Sie den Router

import { Router } from '@angular/router';

2) Deklarieren Sie den Eintrag im Konstruktor

constructor(private router: Router) { }

3) Verwenden Sie den Wert in Ihrer Funktion

yourFunction(){
    if(this.router.url === "/search"){
        //some logic
    }
}

@ Victor Antwort hat mir geholfen, dies ist die gleiche Antwort wie er, aber mit ein wenig Detail, da es jemandem helfen könnte

Mateen
quelle
6
import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}
Verkohlen
quelle
5

In Angular2 Rc1 können Sie RouteSegment injizieren und in der Naviagte-Methode übergeben.

constructor(private router:Router,private segment:RouteSegment) {}

  ngOnInit() {
    this.router.navigate(["explore"],this.segment)
  }
Arpit Agarwal
quelle
5

Mit Angular 2.2.1 (in einem Angular2-Webpack-Starter-basierten Projekt) funktioniert dies:

export class AppComponent {
  subscription: Subscription;
  activeUrl: string;

  constructor(public appState: AppState,
              private router: Router) {
    console.log('[app] constructor AppComponent');
  }

  ngOnInit() {
    console.log('[app] ngOnInit');
    let _this = this;
    this.subscription = this.router.events.subscribe(function (s) {
      if (s instanceof NavigationEnd) {
        _this.activeUrl = s.urlAfterRedirects;
      }
    });
  }

  ngOnDestroy() {
    console.log('[app] ngOnDestroy: ');
    this.subscription.unsubscribe();
  }
}

In der Vorlage von AppComponent können Sie zB {{activeUrl}} verwenden.

Diese Lösung ist vom Code von RouterLinkActive inspiriert.

adrhc
quelle
Dies ist eine gute Antwort, wenn Sie eine Wildcard-Route haben, die zurück zu / home event.url leitet. Dies reicht nicht aus, um mit der / home-Route übereinzustimmen. Es wird tatsächlich die Route angezeigt, die nicht vorhanden ist. event.urlAfterRedirects druckt die tatsächliche Endroute. ty.
Ian Poston Framer
4

Winkel 2 rc2

router.urlTree.contains(router.createUrlTree(['/home']))
nadav
quelle
4

Folgendes funktioniert für mich in Angular 2.3.1.

location: any;

constructor(private _router: Router) { 

      _router.events.subscribe((data:any) => { this.location = data.url; });

      console.warn(this.location);  // This should print only path e.g. "/home"
}

Das dataist ein Objekt und wir brauchen die urlin diesem Objekt enthaltene Eigenschaft. Wir erfassen diesen Wert also in einer Variablen und können diese Variable auch in unserer HTML-Seite verwenden. Zum Beispiel möchte ich ein div nur anzeigen, wenn sich der Benutzer auf der Startseite befindet. In diesem Fall ist mein Router-URL-Wert /home. So kann ich ein div folgendermaßen schreiben:

<div *ngIf="location == '/home'">
This is content for the home page.
</div>
Devner
quelle
4

Ich hatte das gleiche Problem mit

this.router.url

Ich erhalte die aktuelle Route mit Abfrageparametern. Eine Problemumgehung, die ich gemacht habe, war stattdessen Folgendes:

this.router.url.split('?')[0]

Keine wirklich schöne Lösung, aber hilfreich.

Ameise T.
quelle
4

Sie können verwenden ActivatedRoute, um den aktuellen Router abzurufen

Originalantwort (für RC-Version)

Ich habe eine Lösung in der AngularJS Google Group gefunden und es ist so einfach!

ngOnInit() {
  this.router.subscribe((url) => console.log(url));
}

Hier ist die ursprüngliche Antwort

https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ

Khaled Al-Ansari
quelle
Wurde ab rc.2 geändert, da urljetzt nicht mehr die URL und eine Zeichenfolge, sondern a ComponentInstruction.
Martin C.
4

WEG 1 : Verwenden von Angular: this.router.url

import { Component } from '@angular/core';

// Step 1: import the router 
import { Router } from '@angular/router';

@Component({
    template: 'The href is: {{href}}'
    /*
    Other component settings
    */
})
export class Component {
    public href: string = "";

    //Step 2: Declare the same in the constructure.
    constructor(private router: Router) {}

    ngOnInit() {
        this.href = this.router.url;
        // Do comparision here.....
        ///////////////////////////
        console.log(this.router.url);
    }
}

WEG 2 Window.location wie im Javascript, wenn Sie den Router nicht verwenden möchten

this.href= window.location.href;
Trilok Pathak
quelle
3

Für Ihre Zwecke können Sie verwenden this.activatedRoute.pathFromRoot.

import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){

}

Mithilfe von pathFromRoot können Sie die Liste der übergeordneten URLs abrufen und prüfen, ob der erforderliche Teil der URL Ihrer Bedingung entspricht.

Weitere Informationen finden Sie in diesem Artikel unter http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ oder installieren Sie ng2-router-helper ab npm

npm install ng2-router-helper
Дмитрий Мельниченко
quelle
3

Um das übergeordnete Element der aktuellen Route zu finden, können Sie das UrlTreevom Router mithilfe relativer Routen abrufen:

var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});

Dann, um die Segmente der primären Steckdose zu erhalten:

tree.root.children[PRIMARY_OUTLET].segments;
Pixelbits
quelle
3

Ab sofort gehe ich wie folgt vor:

this.router.url.subscribe(value => {
    // you may print value to see the actual object
    // console.log(JSON.stringify(value));
    this.isPreview = value[0].path === 'preview';
})

Wo routerist eine Instanz vonActivatedRoute

Tushar Walzade
quelle
3

router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.currentUrl = e.url;
      }
    });

Manoj Manu M.
quelle
3
import { Router, NavigationEnd } from "@angular/router";

constructor(private router: Router) {
  // Detect current route
  router.events.subscribe(val => {
    if (val instanceof NavigationEnd) {
      console.log(val.url);
    }
});
Hamza
quelle
2

Dies ist einfach. In Winkel 2 müssen Sie die Router- Bibliothek nur folgendermaßen importieren :

import { Router } from '@angular/router';

Dann müssen Sie es im Konstruktor der Komponente oder des Dienstes wie folgt instanziieren:

constructor(private _router: Router) {}

Dann in jedem Teil des Codes, entweder in einer Funktion, Methode, Konstrukt, was auch immer:

      this._router.events
        .subscribe(
            (url:any) => {
                let _ruta = "";
                url.url.split("/").forEach(element => {
                    if(element!=="" && _ruta==="")
                        _ruta="/"+element;  
                });
                console.log("route: "+_ruta); //<<<---- Root path
                console.log("to URL:"+url.url); //<<<---- Destination URL                    
                console.log("from URL:"+this._router.url);//<<<---- Current URL
            }); 
eberlast
quelle
2

Sie können in der .ts-Datei verwenden

import { Route, Router, NavigationStart } from '@angular/router';

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });
Chirag
quelle
1

Dies könnte Ihre Antwort sein. Verwenden Sie die params-Methode der aktivierten Route, um den Parameter von der URL / Route abzurufen, die Sie lesen möchten. Unten finden Sie ein Demo-Snippet

import {ActivatedRoute} from '@angular/router'; 
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params => {
             this.yourVariable = params['required_param_name'];
        });
    }
}
Vinod
quelle
1
this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});
Shanil Sasikumar
quelle
1

Wenn Sie auf die aktuelle URL zugreifen müssen, müssen Sie normalerweise warten, bis NavigationEnd oder NavigationStart etwas tun. Wenn Sie nur die Router-Ereignisse abonnieren, gibt das Abonnement viele Ereignisse im Routenlebenszyklus aus. Verwenden Sie stattdessen einen RxJS-Operator, um nur nach dem Ereignis zu filtern, das Sie benötigen. Der vorteilhafte Nebeneffekt davon ist, dass wir jetzt strengere Typen haben!

constructor(private router: Router) {
    router.events.pipe(
      filter(ev => (ev instanceof NavigationEnd))
    ).subscribe((ev: NavigationEnd) => {
      console.log(ev.url);
    });
}

codescholar
quelle
1

Ich hatte das Problem, dass ich den URL-Pfad benötigte, wenn der Benutzer durch die App navigiert oder auf eine URL zugreift (oder eine bestimmte URL aktualisiert), um untergeordnete Komponenten basierend auf der URL anzuzeigen.

Außerdem möchte ich ein Observable, das in der Vorlage verwendet werden kann, sodass router.url keine Option war. Das router.events- Abonnement wird auch nicht ausgeführt, da das Routing ausgelöst wird, bevor die Vorlage der Komponente initialisiert wird.

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

Hoffe es hilft, viel Glück!

Andrew Radulescu
quelle
1
Das ist fantastisch.
Codeepic