angular - 대상 구성 요소의 URL에 표시되지 않고 한 구성 요소에서 다른 구성 요소로 json을 보냅니다

한 구성 요소에서 다른 구성 요소로 복잡한 데이터를 보내려면 일반적으로 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 데모입니다.

도움이 되길 바랍니다 :)

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
    }
  }

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