So erhalten Sie die aktuelle Route

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?

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

this.router.url === '/login'

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

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

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

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

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

So erhalten Sie die Routensegmente:

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

constructor( route: ActivatedRoute) {}

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

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.

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

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

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

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

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

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.

Winkel 2 rc2

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

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>

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.

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

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;

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

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;

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

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

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

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

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

this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});

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

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!