Angular2 : 공유 서비스가없는 경로간에 데이터를 교환하십시오.

Question

두 경로가 있습니다. 하나는 "상위"- 하나는 "하위"- 라우트입니다. 부모 루트가 항상 먼저로드되고 사용자가 자식 경로를 탐색하려는 경우 자식 경로의 내용이로드됩니다.

두 경로 모두 특수 개체 "myObject"가 필요합니다. 부모 경로에는 항상이 객체가 있습니다. 이제 "myObject"를 자식 경로에 전달하려고합니다.

인 myObject 동적이며 객체 (간단한 문자열이나 숫자가 아닌)가
1. 내가했다 DataService 공유 부모 - 경로 저장소를 사용하지 않기 때문에 내가 route.params을 사용할 수 없습니다
2. 인 myObject와 child-route는 myObject를 검색합니다. myObject가 이미 존재하고 myObject를 자식 경로에 전달하기를 원하기 때문에 이것은 다소 과장된 것 같습니다.

이 문제를 해결할 수있는 방법이 있습니까? 어쩌면 Guards의 도움으로? 나는이 같은 어쩌면 단순히 솔루션을 선호 :

this.router.navigate('my/url/to/navigate', myObject); 

Answer 1

당신은 그래서 같은 탐색 호출의 PARAMS에 간단한 속성을 전달할 수 있습니다 - 구성 요소에

this._router.navigate(['/route-location', {name: 'test'}]); 

당신이 구독 할 수 있습니다 노선에 params 및 값을 얻을.

this.route.params.subscribe((p) => { 
     let params: any = p; 
     console.log(params.name); 
    }); 

더 많은 데이터 등을 전달하려면 서비스가 필요합니다.

Answer 2

현재 우아한 방법이 없습니다.

서비스를 정말로 원하지 않는다면 json 형식으로 데이터를 전달할 수 있습니다.

예 (여기, json으로는 URL에 나타납니다) : 자녀의 구성 요소에서

this.router.navigate(['/child-route'], { 
    queryParams: { 
    'myObject': JSON.stringify(myObject) 
    }}); 

(ngOnInit에) :

this.sub = this.route 
    .queryParams 
    .subscribe(t => { 
    console.log(t['myObject']); 
    }); 

이제 하나 개의 제한에 직렬화하여 해당 입니다 JSON, 수업 정보를 잃었습니다.

타이프 스크립트에서는 일반 js 개체에서 클래스 인스턴스를 되 찾을 수 없습니다. this library, class-transformer가 작동하는 것으로 나타 났지만 (성능에 대해서는 전혀 모른다.) 그래서, 다시 TS 예를 자녀의 구성 요소에서 얻을 수 있습니다 :

import {plainToClass} from "class-transformer/index"; 


this.sub = this.route 
    .queryParams 
    .subscribe(t => { 
    let o = <MyObject>JSON.parse(t['myObject']); 
    this.myObject = <MyObject>plainToClass(MyObject, o); 
    }); 

지금, this.myObject 유형 MyObject이다.