Gửi dữ liệu qua các đường dẫn định tuyến trong Angular

Có cách nào để gửi dữ liệu dưới dạng tham số với router.navigate không? Ý tôi là, một cái gì đó giống như ví dụ này , như bạn có thể thấy tuyến đường có tham số dữ liệu, nhưng thực hiện điều này không hoạt động:

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

bởi vì một số dữ liệu không phải là một tham số hợp lệ. Làm thế nào tôi có thể làm điều đó? Tôi không muốn gửi tham số với queryParams.

Có rất nhiều nhầm lẫn về chủ đề này bởi vì có rất nhiều cách khác nhau để làm điều đó.

Dưới đây là các loại thích hợp được sử dụng trong các ảnh chụp màn hình sau:

private route: ActivatedRoute
private router: Router

1) Các thông số định tuyến cần thiết:

2) Thông số tùy chọn tuyến đường:

3) Tham số truy vấn tuyến:

4) Bạn có thể sử dụng một dịch vụ để truyền dữ liệu từ thành phần này sang thành phần khác mà không cần sử dụng tham số tuyến đường.

Ví dụ, xem: https://bloss.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Tôi có một plunker về điều này ở đây: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Có một phương pháp mới đi kèm với Angular 7.2.0

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

Gửi:

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

Nhận:

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

Bạn có thể ngón tay một số thông tin bổ sung ở đây:

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

Liên kết ở trên chứa ví dụ này, những gì có thể hữu ích: https://stackblitz.com/edit/angular-bupuzn

Phiên bản mới nhất của angular (7.2 +) hiện có tùy chọn truyền thông tin bổ sung bằng NavigationExtras .

Thành phần nhà

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

thành phần mới

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

Đầu ra

Hy vọng điều này sẽ giúp!

@ dev-nish Mã của bạn hoạt động với một vài điều chỉnh trong đó. làm cái

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

vào

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

sau đó, nếu bạn muốn gửi một loại dữ liệu cụ thể, ví dụ, JSON là kết quả của việc điền vào biểu mẫu, bạn có thể gửi dữ liệu theo cách tương tự như được giải thích trước đây.

Trong navigationExtra, chúng ta chỉ có thể chuyển một số tên cụ thể làm đối số nếu không nó hiển thị lỗi như dưới đây: Đối với Ex- Ở đây tôi muốn chuyển khóa khách hàng trong điều hướng bộ định tuyến và tôi chuyển như thế này-

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

nhưng nó hiển thị một số lỗi như dưới đây:

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'

.

Giải pháp: chúng ta phải viết như thế này:

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

Tốt nhất tôi tìm thấy trên internet cho điều này là ngx-navigation-with-data . Nó rất đơn giản và tốt để điều hướng dữ liệu từ thành phần này sang thành phần khác. Bạn chỉ cần nhập lớp thành phần và sử dụng nó theo cách rất đơn giản. Giả sử bạn có nhà và về thành phần và muốn gửi dữ liệu sau đó

THÀNH PHẦN

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

}

GIỚI THIỆU

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() {
 }

}

Đối với bất kỳ truy vấn nào, hãy theo dõi https://www.npmjs.com/package/ngx-navlation-with-data

Bình luận xuống để được giúp đỡ.