Jak uzyskać aktualną trasę

Obecne dokumenty mówią tylko o uzyskiwaniu parametrów trasy, a nie o rzeczywistych odcinkach trasy.

Na przykład, jeśli chcę znaleźć element nadrzędny bieżącej trasy, jak to możliwe?

Nowy router V3 ma właściwość url.

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

Kątowy RC4:

Możesz importować Routerz@angular/router

Następnie wstrzyknij:

constructor(private router: Router ) {

}

Następnie wywołaj parametr URL:

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

Wstrzyknij Locationdo swojego komponentu i przeczytaj location.path(); Musisz ROUTER_DIRECTIVESgdzieś dodać, aby Angular mógł rozwiązać Location. Musisz dodać import: [RouterModule]do modułu.

Aktualizacja

W routerze V3 (RC.3) możesz wstrzykiwać ActivatedRoutei uzyskiwać dostęp do większej liczby szczegółów za pomocą jego snapshotwłaściwości.

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

lub

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

Zobacz także detektor zdarzeń routera Angular 2

dla nowego routera> = RC.3

Najlepszy i prosty sposób to zrobić!

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

Użyj tego

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

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

I w main.tsimporcie

import 'rxjs/add/operator/filter';

EDYTOWAĆ

Nowoczesny sposób

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

Dla tych, którzy wciąż tego szukają. W Angular 2.x można to zrobić na kilka sposobów.

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
}

Bibliografia:

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

Aby uzyskać segmenty trasy:

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

constructor( route: ActivatedRoute) {}

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

Możesz spróbować

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

Alternatywne sposoby

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

window.location.pathname która podaje nazwę ścieżki.

Aby niezawodnie uzyskać pełną aktualną trasę, możesz jej użyć

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

Obiekt macierzysty również windowdziała dobrze

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

UWAGA: NIE UŻYWAJ TEGO W SERWISIE Renderowania po stronie serwera

krótka wersja, jeśli masz zaimportowany router , możesz po prostu użyć czegoś takiego

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

w przeciwnym razie wykonaj następujące czynności

1) Zaimportuj router

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

2) Zadeklaruj swój wpis w konstruktorze

constructor(private router: Router) { }

3) Użyj jego wartości w swojej funkcji

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

Odpowiedź @victor pomogła mi, to jest ta sama odpowiedź co on, ale z drobnymi szczegółami, ponieważ może komuś pomóc

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

W Angular2 Rc1 możesz wstrzyknąć RouteSegment i przekazać je metodą naviagte.

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

  ngOnInit() {
    this.router.navigate(["explore"],this.segment)
  }

Z angular 2.2.1 (w projekcie opartym na angular2-webpack-starter) działa to tak:

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

W szablonie AppComponent możesz użyć np. {{ActiveUrl}}.

To rozwiązanie jest inspirowane kodem RouterLinkActive.

kątowy 2 rc2

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

Oto, co działa dla mnie w 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"
}

dataJest obiektem i potrzebujemy urlwłasności zawartych w tym obiekcie. Przechwytujemy więc tę wartość w zmiennej i możemy również użyć tej zmiennej na naszej stronie HTML. Na przykład chcę wyświetlać div tylko wtedy, gdy użytkownik jest na stronie głównej. W takim przypadku moja wartość adresu URL routera będzie wynosić /home. Więc mogę napisać div w następujący sposób:

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

Miałem ten sam problem z używaniem

this.router.url

Otrzymuję bieżącą trasę z parametrami zapytania. Obejściem tego problemu było użycie tego:

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

Niezbyt dobre rozwiązanie, ale pomocne.

Możesz użyć, ActivatedRouteaby uzyskać bieżący router

Oryginalna odpowiedź (dla wersji RC)

Znalazłem rozwiązanie na AngularJS Google Group i to takie proste!

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

Oto oryginalna odpowiedź

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

SPOSÓB 1 : Korzystanie z 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 jak my w JavaScript, jeśli nie chcesz korzystać z routera

this.href= window.location.href;

Do swoich celów możesz użyć this.activatedRoute.pathFromRoot.

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

}

Za pomocą pathFromRoot możesz uzyskać listę nadrzędnych adresów URL i sprawdzić, czy potrzebna część adresu URL pasuje do Twojego stanu.

Aby uzyskać dodatkowe informacje, sprawdź ten artykuł http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ lub zainstaluj ng2-router-helper z npm

npm install ng2-router-helper

Aby znaleźć element nadrzędny bieżącej trasy, możesz uzyskać ją UrlTreez routera, używając względnych tras:

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

Następnie, aby uzyskać segmenty głównego gniazdka:

tree.root.children[PRIMARY_OUTLET].segments;

W tej chwili moja ścieżka jest następująca -

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

Gdzie routerjest przypadekActivatedRoute

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

to proste, w Angular 2 wystarczy zaimportować bibliotekę Routera w następujący sposób:

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

Następnie w konstruktorze komponentu lub usługi należy utworzyć instancję w następujący sposób:

constructor(private _router: Router) {}

Następnie w dowolnej części kodu, w funkcji, metodzie, konstrukcji, cokolwiek:

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

Możesz użyć w pliku .ts

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

to może być twoja odpowiedź, użyj metody params aktywowanej trasy, aby uzyskać parametry z adresu URL / trasy, którą chcesz przeczytać, poniżej znajduje się fragment demonstracyjny

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

Jeśli potrzebujesz dostępu do bieżącego adresu URL, zwykle musisz poczekać, aż NavigationEnd lub NavigationStart coś zrobią. Jeśli subskrybujesz tylko zdarzenia routera, subskrypcja wygeneruje wiele zdarzeń w cyklu życia trasy. Zamiast tego użyj operatora RxJS, aby filtrować tylko potrzebne zdarzenia. Korzystnym efektem ubocznym jest teraz, że mamy surowsze typy!

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

Napotkałem problem polegający na tym, że potrzebowałem ścieżki URL, gdy użytkownik porusza się po aplikacji lub uzyskuje dostęp do adresu URL (lub odświeżania określonego adresu URL), aby wyświetlić elementy potomne na podstawie adresu URL.

Ponadto chcę obserwowalny, który można wykorzystać w szablonie, więc router.url nie był opcją. Ani subskrypcja router.events, ponieważ routing jest uruchamiany przed zainicjowaniem szablonu komponentu.

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

Mam nadzieję, że to pomaga, powodzenia!