angular 앵귤러 라우팅 - 현재 경로를 얻는 방법





11 Answers

각도 RC4 :

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

그런 다음 주입하십시오.

constructor(private router: Router ) {

}

그런 다음 URL 매개 변수라고합니다.

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

현재 문서에서는 실제 경로 세그먼트가 아니라 경로 매개 변수를 가져 오는 것에 대해서만 설명합니다.

예를 들어 현재 경로의 부모를 찾으려면 어떻게 할 수 있습니까?




새 라우터> = 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"
}



아직도 이것을 찾고있는 사람들을 위해. 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 { 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);
    }
  }
);



각도 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 === "/ search"

그렇지 않으면 다음을 수행하십시오.

1) 라우터 가져 오기

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

2) 생성자에서 엔트리 선언

constructor(private router: Router) { }

3) 함수에서 값 사용

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

@victor 대답은 나를 도와 줬어,이 사람과 같은 대답이지만, 누군가에게 도움이 될 수있는 약간의 세부 사항이있다.




이것은 간단합니다. 각도 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
            }); 



현재 경로의 부모를 찾으려면 상대 경로를 사용하여 라우터에서 UrlTree 를 가져올 수 있습니다.

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

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

tree.root.children[PRIMARY_OUTLET].segments;



이것은 당신의 대답 일 수 있습니다. 활성화 된 경로의 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'];
        });
    }
}



Related