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

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

router.navigate로 데이터를 매개 변수로 보낼 방법이 있습니까?제 말은, 다음과 같은 예입니다. 보시다시피 경로에 데이터 매개 변수가 있지만 이렇게 하면 작동하지 않습니다.

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

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

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

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

private route: ActivatedRoute
private router: Router

필수 라우팅 매개 변수:

경로 선택적 매개변수:

경로 쿼리 매개 변수:

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

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

여기 이것에 대한 플랭크가 있습니다: 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

최신 버전의 Angular(7.2 +)는 이제 내비게이션을 사용하여 추가 정보를 전달할 수 있는 옵션을 제공합니다.엑스트라.

가정용 부품

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

새 구성 요소

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

산출량

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

탐색 중추가로 일부 특정 이름만 인수로 전달할 수 있습니다. 그렇지 않으면 아래와 같은 오류가 표시됩니다.예를 들어, 여기서 나는 라우터 탐색에서 고객 키를 전달하고 싶고 나는 이렇게 전달합니다.

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

데이터에 대한 액세스가 필요했습니다.CustomRouteReuseStrategy그리고 주사를 놓을 수 없었습니다.Router순환 의존성 때문에 그곳에서 하지만 당신은 사용할 수 있습니다.Location상태도 읽을 수 있습니다.

Send:

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

Receive:
    import { Location } from '@angular/common';

    constructor(private location: Location) {
      console.log(this.location.getState().example); // should log out 'bar'
    }

@dev-nish 당신의 코드는 약간의 수정으로 작동합니다. 만드십시오.

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

안으로

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

그런 다음 양식 채우기의 결과로 JSON과 같이 특정 유형의 데이터를 전송하려면 앞서 설명한 것과 같은 방식으로 데이터를 전송할 수 있습니다.

getStateById(stateId) { this.http.get(environment.user_service_url + "/getStateById", {params:{"stateId": stateId}}; }

15, Angular 15 이로후 로,this.router.getCurrentNavigation()구성 요소가 탐색 후 인스턴스화되므로 null을 반환할 수 있습니다.

대안은 다음에서 상태에 액세스하는 것입니다.Location((으)에서 온 @angular/common)

  import { Location } from '@angular/common';

  constructor(private location: Location) {
    location.getState() // do what you want 
  }

제가 인터넷에서 찾은 최고의 것은 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 을 따릅니다.

도움을 요청하려면 의견을 제시하십시오.

언급URL : https://stackoverflow.com/questions/44864303/send-data-through-routing-paths-in-angular