2017-05-05 2 views
0

Angular2 처리 URL 인코딩 된 JSON 행렬 매개 변수에 문제가 있습니다. JSON 내의 문자열 필드에서 괄호를 처리하기 위해 사용자 지정 UrlSerializer를 만들어야했습니다. 예 : 사용자 에이전트 문자열. 당신이 볼 수 있듯이, 괄호는 기본적으로 괄호에 특수 문자가있는 가정 표준 직렬화에 추가로 연재되고있다Angular2 Url 인코딩 된 JSON 행렬 매개 변수

import { Injectable } from '@angular/core'; 
import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router'; 

@Injectable() 
export class CustomUrlSerializer implements UrlSerializer { 
    constructor(
     private defaultUrlSerializer: DefaultUrlSerializer 
    ) {} 
    parse(url: string): UrlTree { 

     const defaultTree = this.defaultUrlSerializer.parse(url); 
     return defaultTree; 
    } 

    serialize(tree: UrlTree): string { 
     // Use the default serializer to create a url. 
     const defaultSerialization = this.defaultUrlSerializer.serialize(tree); 
     const parenthesisFix = defaultSerialization 
      .replace(/\(/g, '%28') 
      .replace(/\)/g, '%29'); 
     return parenthesisFix; 
    } 
} 

: 같은 사용자 지정 직렬 보인다. 코드는 간단한 값에 대해 올바르게 작동합니다. 여기서는 두 개의 행렬 매개 변수 ('comp_id'및 'camp_id')가 URL 트리로 구문 분석됩니다. .

enter image description here

그리고 :

enter image description here

는 root.children.primary.segments [ "0"] 검사 트리의 경로는 우리가 직렬화 볼 것으로 예상 개체를 얻을 수 매개 변수 router params subscription은 해당 매개 변수를 예상대로 관찰합니다.

enter image description here,그러나 매트릭스 파라미터 (이 예에서 R '가') 인 경우에 URL 인코딩 JSON 문자열 우리가 가지고

enter image description here

다시, root.children.primary.segments [IN "0"]. 매개 변수 경로 트리에서 우리는 채워질 것으로 예상되는 객체를 볼 수 있습니다 (참고 : 괄호가 제대로 직렬화 해제되지 않았고 문자열은 유효한 JSON입니다. 문자열 필드) :

enter image description here

이 시간을 제외하고 route params subscription은 빈 객체를 관찰합니다!

enter image description here

내 의심 콘텐츠가 직렬화 후 각도에 의해 살균되고,하지만 난 아직 확인하지 못하고 있다는 점이다. 어떤 제안?

+0

왜 encodeURIComponent를 사용하지 않는 것이 좋습니까? –

+0

@JuliaPassynkova : 인코딩이 유효하며 코드 및 기타 다양한 도구에서 문제없이 디코딩합니다. 문제는 범위와 관련이 있습니다. 생각에 감사드립니다. – CellularAutomaton

+0

코드를 이미지가 아닌 텍스트로 포함하십시오. 아무도 자신의 코드 이미지를 사용하여 유사한 질문을 검색하지 않습니다. –

답변

0

이것은 결국 범위 지정/DI 문제가되었습니다. 컴포넌트에서 직접 경로 매개 변수에 가입하면 (서비스로 푸시 했음) JSON 매트릭스 매개 변수가 작동하기 시작합니다.

관련 문제