각도 : URL로 모든 경로 세그먼트 구성을 해결하십시오.

Question

URL을 입력하십시오. /path/path2/path3/123;sdf=df과 경로 구성 :

{ path: 'path', data: { g: 'h' }, children: [ 
    { path: 'path2', data: { c: 'd' }, children: [ 
    { path: 'something', component: TestpageComponent, data: { a: 'b' } }, 
    { path: 'path3/create', component: TestpageComponent, data: { b: 'c' } }, 
    { path: 'path3/:id', component: TestpageComponent, data: { b: 'c' } }, 
    ] } 
] }, 

내가 필요로하는 모든 수준에있는 모든 data 매개 변수의 결과 집합 (URL의 각 세그먼트)를 얻기 위해 모든 세그먼트에 대한 실제 구성을 찾는 것입니다.

예를 들어 세그먼트로 URL을 분할 할 수 있습니다.

console.log(this.router.parseUrl(url)); 

또는 더 정확하게 할 수

console.log(this.router.parseUrl(url).root.children['primary'].segments); 

[{"path":"path","parameters":{}},{"path":"path2","parameters":{}},{"path":"and","parameters":{}},{"path":"123","parameters":{"sdf":"df"}}] 

그래서, 세그먼트로 URL을 분할하는 것은 문제가되지 않습니다 반환하는. 그러나 각 세그먼트에 대한 구성을 가져와야합니다.

내가

console.log(this.router.config); 

내가 구성 트리를 통해 세그먼트로 가서 내가 원하는 지점을 찾을 수있는 모든 경로의 실제 구성을 얻을 수 있지만,이 문제를 예를 들면 발생할 수 create 세그먼트에 대해 :id을 해결하는 중입니다. 그래서 라우터의 내부 라우터 구현이 변경되면 광산을 변경할 필요가 없다는 구성을 해결하는 방법을 사용하고 싶습니다.

예 : 일부 보호자에 의해 보호되는 URL의 50 % (예 : 로그인 한 사용자 만 이동할 수 있음)와 다른 50 %가 보호되지 않은 (모든 사용자에게 표시됨) 경우를 상상해보십시오. 따라서 내비게이션 메뉴 레벨 (router-outlet 외부)에서는 현재 사용자와 관련된 링크 만 표시하므로 어떤 경로가 가드에 의해 보호되는지 알아야합니다. 경비원/데이터/어떤 것이 든 문제의 특별한 경우입니다.

예 :을 따르지 마십시오. 특정 URL에 대한 구성 설정을 얻는 일반적인 방법을 찾고 있습니다.

여하튼 가능합니까?

Answer 1

버전 2.x에서는 라우터가 내부적으로 사용하는 recognize 기능을 사용하여 URL을 RouteStateSnapshot과 대조 할 수 있습니다.

import { recognize } from '@angular/router/src/recognize'; 

recognize(null, this.router.config, this.router.parseUrl(url), url).subscribe(route => { 
    var routeSnapshot = route.root.firstChild; 

    // Go to all children to get actual route. 
    // If you use routes with children you should have 
    // the full tree here 
    var childSnapshot = routeSnapshot.firstChild; 
    while (childSnapshot != null) { 
     childSnapshot = routeSnapshot.firstChild; 
     if (childSnapshot != null) { 
      routeSnapshot = childSnapshot; 
     } 
    } 

    let routeData = routeSnapshot.data || {}; 

    // routeData['a']... 
}); 

슬프게도 이것은 더 이상 버전 4.x에서 작동하지 않는 것으로 보입니다. 버전 4.x 들어, 인식 기능을 노출하려면 Router 새 메서드를 추가하려면 끌어 오기 요청을 만들었습니다.

https://github.com/angular/angular/issues/15826

또 다른 측면 노트. .catch((rej) => { // some code if it fails to resolve route })을 추가하여 약속의 오류 (인식 또는 새 라우터 방법 중 하나)를 처리하는 것이 좋습니다. url-> routestatesnapshot을 해결하지 못할 수도 있습니다.URL이 잘못되었거나 LoadChildren을 통해 비동기 경로를 사용하고 경로가 아직로드되지 않았기 때문입니다. 빵 부스러기는 비동기 경로에서도이 기능을 사용하여 훌륭하게 작동합니다. 예를 들어 지시문을 통해 권한을 확인하는 데이 옵션을 사용하는 경우 비동기 경로를 사용하는지주의해야합니다.

Answer 2

경로에 대한 데이터 구성을 가져 오는 다른 방법이 있습니다. 여기에는 데이터 객체의 key 속성을 아는 것이 포함됩니다. 구성 요소에서

당신과 함께 심지어

this.route.snapshot.parent.data['key'] 

또는 함께

this.route.snapshot.data['key'] 

당신은 부모의 데이터를 얻을 수

와 조부모의 데이터를 그 정확한 경로에 대한 데이터를 얻을 수 있습니다

this.route.snapshot.parent.parent.data['key'] 

모든 경로에서 다른 키를 사용하기 때문에 키가 더 어려워집니다.당신이 당신의 URL 세그먼트를 알고있는 경우

let keys = Object.keys(this.route.snapshot.data); 
keys.map(x => { 
    console.log('key', x); 
    console.log('data', this.route.snapshot.data[x]); 
} 

또한, 당신도 특정 경로에 대한 설정을 얻기 위해 그에 일치시킬 수 있습니다 :이 경우, 당신은 키의 목록을받을 수 있도록 반복해야 할 것입니다 :

obj = {}; 
getData(routeData){ 
    let keys = Object.keys(routeData); 
    keys.map(x => this.obj[x] = routeData[x]) 
} 

this.getData(this.route.snapshot.parent.parent.data); 
this.getData(this.route.snapshot.parent.data); 
this.getData(this.route.snapshot.data); 
console.log(obj); 

는 희망이 당신이 필요로하는 데이터를 얻기에 바른 길에 당신을 얻을 수 있습니다 :

let configForRoute = this.router.config.find(x => x.path === this. route.snapshot.url.toString()) 

let dataForSegment = this.router.config.find(x => x.path === 'somePath').data['key'] 

원유 솔루션은 다음과 같이 보일 것입니다 필요한 모든 데이터를 얻을 수 있습니다.

편집

나는 원래의 질문을 오해 할 수있다.

가 왜 그렇게 필요 :의 추가 이후

? 에 의해 보호되는 URL의 50 %가 있다고 가정하고 (예 : 로그인 한 사용자 만 그곳에 갈 수 있음) 다른 50 %는 (모든 사용자에게 표시됨)이 아니라고 가정합니다. 그래서, 내비게이션 메뉴 레벨 (라우터 아웃렛 외부)에서 현재 사용자와 관련된 링크 만 표시하고 싶습니다. 따라서 어떤 경로가 가드에 의해 보호되고 있는지 알아야합니다. 경비원/데이터/무엇이든지 문제의 특별한 경우 일뿐입니다.

나도 인증되지 않은 사용자가 볼 수있는 링크를 숨기거나 권한이없는 사용자가 볼 수있는 링크를 숨기는이 문제를 해결하는 방법은 사용자가 인증 또는 권한이 있는지 여부를 확인 할 수 있습니다 내 인증 서비스에 함수를 만드는 것입니다. 그것은 내 길드에서 경비원이 사용하는 것과 같은 기능입니다.

예를 들어, 경로 데이터가있는 내 경로에 data: { permissions:[permission1, permission2] } 가드가있을 수 있습니다.이 가드는 인증 서비스의 기능을 사용하여 사용자가 데이터 필드에 나열된 권한을 사용하는 권한을 가지고 있는지 확인합니다. 또한 인증 서비스에서 동일한 기능을 사용하여 내 메인 메뉴의 링크를 *ngIf="authSvc.CheckPermission(permission1) 등으로 숨길 수 있습니다.이 방법으로 어디서나 논리를 복제 할 필요가 없습니다. 궁극적으로 API 엔드 포인트는 보호 된 서버 측이어야합니다.

라우터에 URL을 제공하고 탐색하지 않고도 일치하는 경로를 얻을 수있는 방법은 문서화 된 방법으로 찾을 수 없습니다. 희망이 적어도 조금은 도움이됩니다.