Geçerli rota nasıl edinilir

Şu anki dokümanlar gerçek rota segmentlerini değil, yalnızca rota parametrelerini alma hakkında konuşuyor.

Örneğin, geçerli rotanın üst öğesini bulmak istersem, bu nasıl mümkün olabilir?

Yeni V3 yönlendirici bir url özelliğine sahiptir.

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

Açısal RC4:

RouterBuradan içe aktarabilirsiniz@angular/router

Sonra enjekte edin:

constructor(private router: Router ) {

}

Ardından URL parametresini arayın:

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

LocationBileşeninize enjekte edin ve okuyun, Angular'ın çözebileceği bir yer location.path(); eklemeniz gerekir . ROUTER_DIRECTIVESLocationimport: [RouterModule]Modüle eklemeniz gerekir .

Güncelleme

V3 (RC.3) yönlendiricide ActivatedRoute, snapshotözelliğini kullanarak daha fazla ayrıntı enjekte edebilir ve erişebilirsiniz .

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

veya

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

Ayrıca bkz. Angular 2 yönlendirici olay dinleyicisi

yeni yönlendirici için> = RC.3

En iyi ve bunu yapmanın basit bir yolu!

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

Bunu kullan

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

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

Ve main.tsithalatta

import 'rxjs/add/operator/filter';

DÜZENLE

Modern yol

import {filter} from 'rxjs/operators';

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

Hala bunu arayanlar için. Açısal 2.x'te bunu yapmanın birkaç yolu vardır.

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
}

Referanslar:

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

Rota segmentlerini almak için:

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

constructor( route: ActivatedRoute) {}

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

İle deneyebilirsiniz

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

Alternatif yollar

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

window.location.pathname ki bu yol adını verir.

Güncel rotayı güvenilir bir şekilde almak için bunu kullanabilirsiniz

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

Yerel windownesne de iyi çalışıyor

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

NOT: BU SUNUCU YAN RENDERING'DE KULLANMAYIN

Router'ınız varsa kısa versiyon ithal varsa o zaman sadece gibi bir şey kullanabilirsiniz

this.router.url === "/ arama"

başka aşağıdakileri yapın

1) yönlendirici alın

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

2) Yapıcıya girişini beyan eder

constructor(private router: Router) { }

3) İşlevinizde değerini kullanın

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

@victor cevap bana yardımcı oldu, bu onunla aynı cevap ama biraz ayrıntıyla, birine yardımcı olabilir

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

Angular2 Rc1'de RouteSegment enjekte edebilir ve naviagte yönteminde geçirebilirsiniz.

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

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

Açısal 2.2.1 (açısal2-webpack-starter tabanlı bir projede) şu şekilde çalışır:

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

AppComponent şablonunda örneğin {{activeUrl}} kullanabilirsiniz.

Bu çözüm RouterLinkActive kodundan esinlenmiştir.

açısal 2 rc2

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

İşte Açısal 2.3.1'de benim için çalışan şey.

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

Bu databir nesnedir ve urlbu nesnede bulunan özelliğe ihtiyacımız vardır . Böylece bu değeri bir değişkende yakalarız ve bu değişkeni HTML sayfamızda da kullanabiliriz. Örneğin, yalnızca kullanıcı Giriş sayfasındayken bir div göstermek istiyorum. Bu durumda, yönlendirici url değerim olacaktır /home. Böylece aşağıdaki şekilde bir div yazabilirim:

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

Kullanırken aynı sorunu yaşadım

this.router.url

Geçerli yolu sorgu parametreleri ile alıyorum. Yaptığım bir geçici çözüm bunu kullanıyordu:

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

Gerçekten güzel bir çözüm değil, ama yararlı.

ActivatedRouteMevcut yönlendiriciyi almak için kullanabilirsiniz

Orijinal Yanıt (RC sürümü için)

AngularJS Google Group'ta bir çözüm buldum ve çok kolay!

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

İşte orijinal cevap

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

YOL 1 : Açısal Kullanımı: 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 Javascript'te yaptığımız gibi Window.location, yönlendiriciyi kullanmak istemiyorsanız

this.href= window.location.href;

Amaçlarınız için kullanabilirsiniz this.activatedRoute.pathFromRoot.

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

}

PathFromRoot yardımıyla üst URL'lerin listesini alabilir ve URL'nin gerekli bölümünün durumunuzla eşleşip eşleşmediğini kontrol edebilirsiniz.

Daha fazla bilgi için lütfen bu makaleyi kontrol edin http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ veya npm'den ng2-yönlendirici yardımcısını kurun

npm install ng2-router-helper

Geçerli rotanın üst öğesini bulmak için UrlTree, göreli yolları kullanarak yönlendiriciden alabilirsiniz:

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

Ardından, birincil prizin segmentlerini almak için:

tree.root.children[PRIMARY_OUTLET].segments;

Şu andan itibaren yolumu şu şekilde elde ediyorum -

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

Burada, routerbir örneğidirActivatedRoute

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

bu basittir, açısal 2'de sadece Yönlendirici kütüphanesini şu şekilde içe aktarmanız gerekir :

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

Sonra bileşen veya hizmetin yapıcısında bunu şöyle başlatmanız gerekir:

constructor(private _router: Router) {}

Sonra kodun herhangi bir bölümünde, ya bir işlev, yöntem, yapı, ne olursa olsun:

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

.Ts dosyasında kullanabilirsiniz

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

Bu sizin cevabınız olabilir, okumak istediğiniz URL / rotadan parametre almak için etkinleştirilmiş rotanın parametrelerini kullanın, aşağıda demo snippet'i

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

Geçerli URL'ye erişmeniz gerekiyorsa, genellikle NavigationEnd veya NavigationStart öğelerinin bir şey yapmasını beklemeniz gerekir. Sadece yönlendirici olaylarına abone olursanız, abonelik rota yaşam döngüsünde birçok olay gönderir. Bunun yerine, yalnızca ihtiyacınız olan Olayı filtrelemek için bir RxJS işleci kullanın. Bunun olumlu yan etkisi artık daha katı tiplerimiz!

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

Kullanıcı uygulamada gezinirken veya bir URL'ye erişirken URL yoluna ihtiyaç duyduğum sorunla karşı karşıya kaldım dayalı alt bileşenleri görüntülemek için (veya belirli bir URL'de yenilenirken) .

Daha fazla, şablonda tüketilebilir bir Gözlemlenebilir, bu yüzden yönlendirici.url bir seçenek değildi. Yönlendiricinin şablonu başlatılmadan önce yönlendirme yapıldığından, router.events aboneliği de yoktur .

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

Umarım yardımcı olur, iyi şanslar!