it-swarm.com.de

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 die übergeordnete Route der aktuellen Route suchen möchte, wie ist das möglich?

349
pdeva

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

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

Winkel RC4:

Sie können Router aus @angular/router importieren.

Dann spritze es:

constructor(private router: Router ) {

}

Rufen Sie dann den URL-Parameter auf:

console.log(this.router.url); //  /routename
121
lowcrawler

Injizieren Sie Location in Ihre Komponente und lesen Sie location.path(); Sie müssen irgendwo ROUTER_DIRECTIVES hinzufügen, damit Angular Location auflösen kann. Sie müssen import: [RouterModule] zum Modul hinzufügen.

Update

Im V3 (RC.3) -Router können Sie ActivatedRoute injizieren und über die Eigenschaft snapshot auf weitere Details zugreifen.

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

oder

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

Siehe auch Angular 2 Router Event Listener

52

für neuen Router> = RC.

Am besten und einfachsten geht das!

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"
}
37
Rajath M S

Für diejenigen, die noch danach suchen. Bei Angular 2.x gibt es einige Möglichkeiten, dies zu tun.

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
26
n4nd0_o

m die Streckenabschnitte zu erhalten:

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

constructor( route: ActivatedRoute) {}

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

Benutze das

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

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

Und in main.ts importieren

import 'rxjs/add/operator/filter';

EDIT

Moderne Art und Weise

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter((event: any) => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });
19
V. Kalyuzhnyu

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 gibt den Pfadnamen an.

12
Jose G Varanam

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

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

Das native window -Objekt 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 BEI DER SERVER-SEITENVERARBEITUNG

9
Sanket Berde

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 seinen Wert in Ihrer Funktion

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

@ Victor Antwort half mir, das ist die gleiche Antwort wie er, aber mit ein wenig Detail, wie es jemandem helfen könnte

6
Mateen

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)
  }
5
Arpit Agarwal

Mit angular 2.2.1 (in einem angle2-webpack-starter-basierten Projekt) funktioniert Folgendes:

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 AppComponent-Vorlage können Sie z. {{activeUrl}}.

Diese Lösung ist vom Code von RouterLinkActive inspiriert.

5
adrhc

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

Originalantwort (für RC-Version)

Ich habe auf AngularJS Google Group eine Lösung 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

4

Ich hatte das gleiche Problem mit

this.router.url

Ich bekomme die aktuelle Route mit Abfrageparametern. Ein Workaround habe ich stattdessen verwendet:

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

Keine wirklich gute Lösung, aber hilfreich.

4
Ant T.

eckig 2 rc2

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

Hier ist, was für mich in Angular 2.3.1 funktioniert.

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

Die data ist ein Objekt, und wir benötigen die url -Eigenschaft, die in diesem Objekt enthalten ist. Also erfassen wir diesen Wert in einer Variablen und können diese Variable auch in unserer HTML-Seite verwenden. Zum Beispiel möchte ich ein Div nur dann anzeigen, wenn sich der Benutzer auf der Startseite befindet. In diesem Fall lautet der URL-Wert meines Routers /home. So kann ich ein Div folgendermaßen schreiben:

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

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

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

}

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

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

npm install ng2-router-helper

Um das übergeordnete Element der aktuellen Route zu finden, können Sie das UrlTree vom 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;
3
pixelbits

Ab sofort verstehe ich meinen Weg wie folgt:

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

Dabei ist router eine Instanz von ActivatedRoute

3
Tushar Walzade

WAY 1: Using 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);
    }
}

WAY 2 Window.Location wie im Javascript, wenn Sie den Router nicht benutzen wollen

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

dies ist einfach, in angular 2 müssen Sie nur die importieren Router Bibliothek wie folgt:

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 einem beliebigen 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
            }); 
2
eberlast
router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.currentUrl = e.url;
      }
    });
2
Manoj Manu M

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

Mehr möchte ich ein Observable, das in der Vorlage aufgenommen werden kann, also router.url war keine Option. Nor router.events Abonnement, 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!

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

dies könnte Ihre Antwort sein. Verwenden Sie die params-Methode der aktivierten Route, um Parameter von der URL/Route abzurufen, die Sie lesen möchten. Unten sehen 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'];
        });
    }
}
1
Vinod

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

Wenn Sie auf die aktuelle URL zugreifen müssen, müssen Sie normalerweise warten, bis NavigationEnd oder NavigationStart etwas unternommen haben. Wenn Sie nur die Router-Ereignisse abonnieren, werden durch das Abonnement viele Ereignisse im Routenlebenszyklus ausgegeben. Verwenden Sie stattdessen einen RxJS-Operator, um nur nach dem von Ihnen benötigten Ereignis zu filtern. 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);
    });
}

1
codescholar

in der Komponentendatei:

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

constructor(state: ActivatedRouteSnapshot) {
    console.log(state.path)
}

in der Routing-Datei:

enter image description here

0
import {ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){
    console.log(this.route.routeConfig.path);
}
0
NoDiced