[angular] 현재 경로를 얻는 방법



Answers

각도 RC4 :

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

그런 다음 주입하십시오.

constructor(private _router: Router ) {
  this.router = _router;
}

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

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

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

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




이것을 사용하십시오

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

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

그리고 main.ts 가져 오기

import 'rxjs/add/operator/filter';



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



네이티브 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);



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



각도 2 rc2

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



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



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



각도 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의 코드에서 영감을 얻었습니다.







Related