현재 경로를 얻는 방법

현재 문서는 실제 경로 세그먼트가 아닌 경로 매개 변수를 얻는 것에 대해서만 이야기합니다.

예를 들어 현재 경로의 부모를 찾으려면 어떻게 가능합니까?

새로운 V3 라우터에는 url 속성이 있습니다.

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

각도 RC4 :

Router에서 가져올 수 있습니다@angular/router

그런 다음 주입하십시오.

constructor(private router: Router ) {

}

그런 다음 URL 매개 변수를 호출하십시오.

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

Location컴포넌트에 주입 하고 읽습니다 . Angular가 해결할 수 있도록 어딘가에 location.path(); 추가해야합니다 . ROUTER_DIRECTIVESLocationimport: [RouterModule]모듈 에 추가 해야합니다.

최신 정보

V3 (RC.3) 라우터에서는 ActivatedRoute해당 snapshot특성을 사용하여 자세한 정보를 주입 하고 액세스 할 수 있습니다 .

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

또는

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

참조 각도 2 라우터 이벤트 리스너를

새 라우터의 경우> = RC.3

이 작업을 수행하는 가장 좋고 간단한 방법입니다!

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

이것을 사용하십시오

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

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

그리고 main.ts수입

import 'rxjs/add/operator/filter';

편집하다

현대적인 방법

import {filter} from 'rxjs/operators';

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

아직도 이것을 찾는 사람들을 위해. Angular 2.x에는 몇 가지 방법이 있습니다.

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
}

참고 문헌 :

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

경로 세그먼트를 얻으려면

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

constructor( route: ActivatedRoute) {}

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

당신은 시도 할 수 있습니다

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

대체 방법

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

window.location.pathname 경로 이름을 제공합니다.

전체 현재 경로를 안정적으로 얻으려면 이것을 사용할 수 있습니다

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

기본 window객체도 잘 작동합니다

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

참고 : 서버 측 렌더링에서이 기능을 사용하지 마십시오

라우터를 가져온 경우 짧은 버전을 사용하면 다음과 같은 것을 사용할 수 있습니다.

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

그렇지 않으면 다음을 수행

1) 라우터 가져 오기

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

2) 생성자에 항목을 선언하십시오.

constructor(private router: Router) { }

3) 함수에 값을 사용하십시오.

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

@ 빅터 답변이 저에게 도움이되었습니다.

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

Angular2 Rc1에서는 RouteSegment를 주입하고 naviagte 메소드로 전달할 수 있습니다.

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

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

angular 2.2.1 (angular2-webpack-starter 기반 프로젝트)을 사용하면 다음과 같이 작동합니다.

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의 템플릿에서 {{activeUrl}}을 사용할 수 있습니다.

이 솔루션은 RouterLinkActive의 코드에서 영감을 얻었습니다.

각도 2 rc2

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

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

는 data객체이며, 우리가 필요로 url그 객체에 포함 된 속성을. 따라서 변수에서 해당 값을 캡처하고 HTML 페이지에서도 해당 변수를 사용할 수 있습니다. 예를 들어 사용자가 홈페이지에있을 때만 div를 표시하고 싶습니다. 이 경우 내 라우터 URL 값은입니다 /home. 그래서 다음과 같은 방법으로 div를 작성할 수 있습니다.

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

나는 같은 문제를 겪었다.

this.router.url

쿼리 매개 변수가있는 현재 경로를 얻습니다. 내가 한 해결 방법은 이것을 대신 사용하는 것입니다.

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

정말 좋은 해결책은 아니지만 도움이됩니다.

ActivatedRoute현재 라우터를 얻는 데 사용할 수 있습니다

원래 답변 (RC 버전의 경우)

AngularJS Google 그룹 에서 솔루션을 찾았는데 너무 쉽습니다!

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

여기에 원래 답변이 있습니다

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

WAY 1 : 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 Java.에서와 같이 Window.location, 라우터를 사용하지 않으려는 경우

this.href= window.location.href;

당신의 목적을 위해 사용할 수 있습니다 this.activatedRoute.pathFromRoot.

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

}

pathFromRoot를 사용하면 상위 URL 목록을 가져 와서 URL의 필요한 부분이 조건과 일치하는지 확인할 수 있습니다.

자세한 내용은이 기사 http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ 를 확인 하거나 npm에서 ng2-router-helper를 설치 하십시오

npm install ng2-router-helper

현재 라우트의 상위를 찾으려면 UrlTree상대 라우트를 사용하여 라우터에서을 얻을 수 있습니다 .

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

그런 다음 기본 콘센트의 세그먼트를 가져옵니다.

tree.root.children[PRIMARY_OUTLET].segments;

현재로서는 다음과 같이 경로를 얻고 있습니다.

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

경우, router인스턴스이다ActivatedRoute

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

이것은 각도 2에서 라우터 라이브러리를 다음과 같이 가져 오기만하면됩니다 .

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

그런 다음 컴포넌트 또는 서비스의 생성자에서 다음과 같이 인스턴스화해야합니다.

constructor(private _router: Router) {}

그런 다음 코드의 어느 부분에서나 함수, 메서드, 구문 등

      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 파일에서 사용할 수 있습니다

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

이것은 답이 될 수 있습니다. 활성화 된 경로의 params 방법을 사용하여 읽으려는 URL / 경로에서 매개 변수를 얻으십시오. 아래는 데모 스 니펫입니다.

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

현재 URL에 액세스해야하는 경우 일반적으로 NavigationEnd 또는 NavigationStart가 무언가를 수행 할 때까지 기다려야합니다. 라우터 이벤트 만 구독하면 구독은 경로 수명주기에 많은 이벤트를 출력합니다. 대신 RxJS 연산자를 사용하여 필요한 이벤트 만 필터링하십시오. 이것의 유익한 부작용은 이제 더 엄격한 유형입니다!

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

사용자가 앱을 탐색 하거나 URL에 액세스 할 때 URL 경로가 필요한 문제에 직면했습니다. 기반으로 하위 구성 요소를 표시 하거나 특정 URL을 새로 고칠 .

또한 템플릿에서 사용할 수있는 Observable을 원하므로 router.url 은 옵션이 아닙니다. 도 아니다 router.events는 구성 요소의 템플릿이 초기화되기 전에 라우팅 해고되기 때문에 가입이 필요합니다.

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

도움이 되길 바랍니다. 행운을 빌어 요!