Angular에서 라우팅 경로를 통해 데이터 전송

router.navigate를 사용하여 데이터를 매개 변수로 보낼 수 있습니까? 나는, 같은 뜻 이 당신이 경로 데이터 매개 변수가 볼 수 있지만이 일을이 작동하지 않습니다으로, 예를 들어 :

this.router.navigate(["heroes"], {some-data: "othrData"})

일부 데이터는 유효한 매개 변수가 아니기 때문입니다. 어떻게해야합니까? queryParams와 함께 매개 변수를 보내고 싶지 않습니다.

여러 가지 방법이 있기 때문에이 주제에 대해 많은 혼동이 있습니다.

다음 스크린 샷에 사용되는 적절한 유형은 다음과 같습니다.

private route: ActivatedRoute
private router: Router

1) 필수 라우팅 매개 변수 :

2) 경로 옵션 매개 변수 :

3) 경로 쿼리 매개 변수 :

4) 경로 매개 변수를 전혀 사용하지 않고 서비스를 사용하여 한 구성 요소에서 다른 구성 요소로 데이터를 전달할 수 있습니다.

예를 보려면 https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/ 를 참조하십시오.

나는 여기에 plunker를 가지고있다 : https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Angular 7.2.0과 함께 제공되는 새로운 방법이 있습니다

https://angular.io/api/router/NavigationExtras#state

보내다:

this.router.navigate(['action-selection'], { state: { example: 'bar' } });

받기 :

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
}

추가 정보를 여기에서 찾아 볼 수 있습니다.

https://github.com/angular/angular/pull/27198

위의 링크에는 다음 예제가 포함되어 있습니다. https://stackblitz.com/edit/angular-bupuzn

최신 버전의 각도 (7.2 +)에는 NavigationExtras를 사용하여 추가 정보를 전달할 수있는 옵션이 있습니다.

홈 컴포넌트

import {
  Router,
  NavigationExtras
} from '@angular/router';
const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};
this.router.navigate(['newComponent'], navigationExtras);

newComponent

test: string;
constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as {
    transId: string,
    workQueue: boolean,
    services: number,
    code: string
  };
  this.test = "Transaction Key:" + state.transId + "<br /> Configured:" + state.workQueue + "<br /> Services:" + state.services + "<br /> Code: " + state.code;
}

산출

이것이 도움이되기를 바랍니다!

@ dev-nish 코드는 약간의 수정만으로 작동합니다. ~을 만들다

const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};

으로

let navigationExtras: NavigationExtras = {
  state: {
    transd: '',
    workQueue: ,
    services: ,
    code: ''
  }
};

그런 다음 양식 채우기의 결과로 JSON과 같은 데이터 유형을 구체적으로 보내려면 이전에 설명한 것과 동일한 방식으로 데이터를 보낼 수 있습니다.

navigateExtra에서는 특정 이름 만 인수로 전달할 수 있습니다. 그렇지 않으면 아래와 같은 오류가 표시됩니다. 예를 들어 라우터 탐색에서 고객 키를 전달하고 다음과 같이 전달합니다.

this.Router.navigate(['componentname'],{cuskey: {customerkey:response.key}});

그러나 아래와 같은 오류가 표시됩니다.

Argument of type '{ cuskey: { customerkey: any; }; }' is not assignable to parameter of type 'NavigationExtras'.
  Object literal may only specify known properties, and 'cuskey' does not exist in type 'NavigationExt## Heading ##ras'

.

해결책 : 다음과 같이 작성해야합니다.

this.Router.navigate(['componentname'],{state: {customerkey:response.key}});

내가 인터넷에서 찾은 최고의 것은 ngx-navigation-with-data 입니다. 한 구성 요소에서 다른 구성 요소로 데이터를 탐색하는 것은 매우 간단하고 좋습니다. 구성 요소 클래스를 가져 와서 매우 간단한 방법으로 사용해야합니다. 집에 구성 요소가 있고 데이터를 보내고 싶다고 가정하십시오.

홈 컴포넌트

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(public navCtrl: NgxNavigationWithDataComponent) { }

 ngOnInit() {
 }

 navigateToABout() {
  this.navCtrl.navigate('about', {name:"virendta"});
 }

}

구성 요소 정보

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-about',
 templateUrl: './about.component.html',
 styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

 constructor(public navCtrl: NgxNavigationWithDataComponent) {
  console.log(this.navCtrl.get('name')); // it will console Virendra
  console.log(this.navCtrl.data); // it will console whole data object here
 }

 ngOnInit() {
 }

}

모든 문의 사항은 https://www.npmjs.com/package/ngx-navigation-with-data를 따르십시오

도움을 요청하십시오.