현재 경로를 얻는 방법
현재 문서는 실제 경로 세그먼트가 아닌 경로 매개 변수를 얻는 것에 대해서만 이야기합니다.
예를 들어 현재 경로의 부모를 찾으려면 어떻게 가능합니까?
새로운 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(...);
}
새 라우터의 경우> = 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
}
참고 문헌 :
- https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
- https://angular.io/docs/ts/latest/api/router/index/Router-class.html
- 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, 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';
편집하다
현대적인 방법
import {filter} from 'rxjs/operators';
router.events.pipe(
filter((event: any) => event instanceof NavigationEnd)
)
.subscribe(event => {
console.log(event);
});
당신은 시도 할 수 있습니다
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
}
}
@ 빅터 답변이 저에게 도움이되었습니다. 이것은 그와 같은 대답이지만 약간의 세부 사항이 있습니다.
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
당신의 목적을 위해 사용할 수 있습니다 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
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;
이것은 각도 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
});
router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
this.currentUrl = e.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에 액세스 할 때 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)
);
도움이 되길 바랍니다. 행운을 빌어 요!
구성 요소 파일에서 :
import {ActivatedRouteSnapshot} from '@angular/router';
constructor(state: ActivatedRouteSnapshot) {
console.log(state.path)
}
라우팅 파일에서 :
import {ActivatedRoute} from '@angular/router';
constructor(private route:ActivatedRoute){
console.log(this.route.routeConfig.path);
}
참고 URL : https://stackoverflow.com/questions/34597835/how-to-get-current-route
'development' 카테고리의 다른 글
| 힘내를 밀어 넣기 전에 여러 커밋을 결합하기 (0) | 2020.02.27 |
|---|---|
| 엔티티는 LINQ to Entities 조회에서 구성 될 수 없습니다. (0) | 2020.02.27 |
| 여러 줄의 입력 (0) | 2020.02.27 |
| BREW 업데이트 : 다음 추적되지 않은 작업 트리 파일을 병합하여 덮어 씁니다. (0) | 2020.02.27 |
| 파일 또는 어셈블리를로드 할 수 없습니다 ... 형식이 잘못된 프로그램을로드하려고했습니다 (System.BadImageFormatException). (0) | 2020.02.27 |