>

componentA에서 componentB로 json을 보내려고합니다. 문제는 json이 URL에 나타납니다. json이 나타나지 않게하려면 어떻게해야합니까?

라우팅

const appRoutes: Routes = [
  {path: 'componentA', component: componentA},
  {path: 'componentB', component: componentA, data : {}},
  {path: '**', component: NotFoundComponent}
];

템플릿 구성 요소 A

<a *ngFor="let item aArray" (click)="fn_sendJson(item)">Send jSON</a>

componentA .ts

this.aArray={"name":"pablo","countrys":["colombia","perú"],"lastname":"ramirez"}
.
.
fn_sendJson(item:any){
 this.router.navigate(['componentB', {"data": JSON.stringify(item)}]);
}

ComponentB .ts

constructor(
 private router : Router,
 private route: ActivatedRoute
 ) {
 sub:any;
 jsonReceived:any
 . 
 .
 this.sub = this.route.params
 .subscribe(v => this.jsonReceived =JSON.parse(v.data));

원래의 json을 문자열로 변환하는 것을 피할 수있는 방법을 찾지 못했습니다 .json과 같은 효과적인 전송 방법이 있는지 알고 싶습니다 .URL에 존재하지 않아도됩니다. 감사합니다


  • 답변 # 1

    한 구성 요소에서 다른 구성 요소로 복잡한 데이터를 보내려면 일반적으로 URL을 통해 전송하는 것이 좋지 않습니다. 할 수있는 일은 다음과 같은 서비스를 만드는 것입니다 :

    sharing.service.ts

    import { Injectable } from '@angular/core';
    @Injectable()
    export class SharingService {
      private sharingObject: any;
      constructor() { }
      get sharingValue() {
        return this.sharingObject
      }
      set sharingValue(obj) {
        this.sharingObject = obj;
      }
    }
    
    

    이제 두 데이터를 공유하려면 두 구성 요소 모두에 해당 서비스를 주입해야합니다.

    첫 번째 구성 요소는 다음과 같습니다 :

    first.component.ts

    import { Component, OnInit } from '@angular/core';
    import {SharingService} from '../sharing.service';
    import { Router } from '@angular/router';
    @Component({
      selector: 'app-first',
      templateUrl: './first.component.html',
      styleUrls: ['./first.component.css']
    })
    export class FirstComponent implements OnInit {
      myJson: any;
      constructor(private sharingService: SharingService, private router: Router) {
        this.myJson = {
          a: "hello",
          b: "World"
        }
      }
      ngOnInit() {
      }
      send() {
        this.sharingService.sharingValue = this.myJson;
        this.router.navigate(['/second'])
      }
    }
    
    

    이제 두 번째 구성 요소에서 첫 번째 구성 요소가 설정 한 값에 액세스 할 수 있습니다

    second.component.ts

    import { Component, OnInit } from '@angular/core';
    import {SharingService} from '../sharing.service';
    @Component({
      selector: 'app-second',
      templateUrl: './second.component.html',
      styleUrls: ['./second.component.css']
    })
    export class SecondComponent implements OnInit {
      myJson: any;
      constructor(private sharingService: SharingService) { }
      ngOnInit() {
       this.myJson = this.sharingService.sharingValue;
      }
    }
    
    

    다음은이 접근법에 대한 작동중인 stacklitz 데모입니다.

    도움이 되길 바랍니다 :)

  • 답변 # 2

    data service 아래와 같이

    먼저 그 안에 하나의 서비스를 만드십시오

     share: Subject<any> = new Subject();
      share$: Observable<any> = this.share.asObservable();
    
    

    한 가지 방법을 정의하십시오

    shareDate(data:object){
     this.share.next(data);
    }
    
    

    component A 에서

    fn_sendJson(item:any){
     this.router.navigate(['componentB']);
     this.serviceName.shareDate({"data": JSON.stringify(item)})
    }
    
    

    component B 아래와 같은 데이터에 액세스 할 수 있습니다

    ngOnInit() {
    this.serviceName.share$.subscribe(
      res=>{
            console.log(res)//you will get the data
        }
      }
    
    

    문제가 해결되기를 바랍니다!

관련 자료

  • 이전 sql server - 모든 고객 id에 대한 총계 결과를 나누는 방법
  • 다음 android - 발리 요청 JSONArray가 비어 있으면 인식해야합니다