홈>
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
- 답변 # 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 } }
문제가 해결되기를 바랍니다!
관련 자료
- javascript : 요소를 클릭할 때 한 구성 요소에서 다른 구성 요소로 ID를 전달하는 방법
- javascript - React Native에서 한 함수 구성 요소의 상태를 다른 함수 구성 요소에서 변경하는 방법은 무엇입니까?
- reactjs - Reactjs에서 다른 컴포넌트의 자식으로 컴포넌트 생성
- javascript - google 스프레드 시트 스크립트 - 비어 있지 않은 대상 셀을 덮어 쓰지 않고 한 시트에서 다른 시트로 범위를 복사하는 방법
- css - html에서 테이블 태그없이 td 또는 tr 태그 내의 요소를 대상으로 지정할 수없는 이유는 무엇입니까?
- 결과에 포함되지 않고 정규식 조건을 사용할 수 있습니까?
- shell script - 다른 CSV 파일에서 해당/일치 타임 스탬프없이 CSV 파일의 모든 행을 제거합니다
- javascript - Ionic 뒤로 버튼 구성 요소가 Vue에서 해결되지 않는 문제
- kotlin - 호출자 기능을 차단하지 않고 다른 일시 중지 기능에서 일시 중지 기능을 호출하는 방법은 무엇입니까?
- 관리자 권한없이 다른 사용자의 Perforce CL을 제출하는 방법은 무엇입니까?
- javascript - 각도에서 다른 구성 요소의 양식 필드 비활성화
- reactjs - 한 구성 요소에서 함수를 가져 오는 방법은 다른 구성 요소에 반응하여 렌더링합니까?
- 반응 네이티브의 다른 구성 요소에서 모달을 호출하면 모달이 열리지 않습니다
- python - 함수를 자동으로 실행하지 않고 다른 함수에 인수로 전달하는 방법
- javascript - 데이터를 다른 구성 요소로 전달하는 반응
- vue.js - 오류시 Vue의 다른 구성 요소로 리디렉션
- c++ - 다른 배열을 사용하거나 주어진 배열의 요소를 변경하지 않고 배열에있는 모든 요소의 빈도를 계산합니다
- javascript - 컴포넌트로 전송되는 React props는 빈 배열로 나타납니다
- javascript - SVG 애니메이션이 시작되지 않고 시작됨
- reactjs - 반응 - 다른 구성 요소 내부의 구성 요소
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
한 구성 요소에서 다른 구성 요소로 복잡한 데이터를 보내려면 일반적으로 URL을 통해 전송하는 것이 좋지 않습니다. 할 수있는 일은 다음과 같은 서비스를 만드는 것입니다 :
sharing.service.ts
이제 두 데이터를 공유하려면 두 구성 요소 모두에 해당 서비스를 주입해야합니다.
첫 번째 구성 요소는 다음과 같습니다 :
first.component.ts
이제 두 번째 구성 요소에서 첫 번째 구성 요소가 설정 한 값에 액세스 할 수 있습니다
second.component.ts
다음은이 접근법에 대한 작동중인 stacklitz 데모입니다.
도움이 되길 바랍니다 :)