Kirim data melalui jalur perutean di Angular

Apakah ada cara mengirim data sebagai parameter dengan router.navigate? Maksud saya, contoh seperti ini , seperti yang Anda lihat rute memiliki parameter data, tetapi melakukan ini tidak berfungsi:

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

karena beberapa data bukan parameter yang valid. Bagaimana saya bisa melakukan itu? Saya tidak ingin mengirim parameter dengan queryParams.

Ada banyak kebingungan tentang topik ini karena ada begitu banyak cara untuk melakukannya.

Berikut adalah jenis yang sesuai digunakan dalam tangkapan layar berikut:

private route: ActivatedRoute
private router: Router

1) Diperlukan Parameter Routing:

2) Rute Parameter Opsional:

3) Parameter Parameter Rute:

4) Anda dapat menggunakan layanan untuk meneruskan data dari satu komponen ke komponen lain tanpa menggunakan parameter rute sama sekali.

Sebagai contoh, lihat: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Saya memiliki penyedot ini di sini: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Ada metode baru yang menyertai Angular 7.2.0

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

Kirim:

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

Menerima:

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

Anda dapat membaca beberapa info tambahan di sini:

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

Tautan di atas berisi contoh ini, apa yang bisa berguna: https://stackblitz.com/edit/angular-bupuzn

Versi angular terbaru (7.2 +) sekarang memiliki opsi untuk meneruskan informasi tambahan menggunakan NavigationExtras .

Komponen rumah

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

komponen baru

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

Keluaran

Semoga ini bisa membantu!

@ dev-nish Kode Anda berfungsi dengan sedikit penyesuaian. buat

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

ke

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

maka jika Anda ingin secara khusus mengirim tipe data, misalnya, JSON sebagai hasil dari pengisian formulir, Anda dapat mengirim data dengan cara yang sama seperti yang dijelaskan sebelumnya.

Di navigExtra kita hanya dapat memberikan beberapa nama tertentu sebagai argumen jika tidak akan menampilkan kesalahan seperti di bawah ini: Untuk Ex- Di sini saya ingin meneruskan kunci pelanggan di navigasi router dan saya meneruskan seperti ini-

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

tetapi menunjukkan beberapa kesalahan seperti di bawah ini:

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'

.

Solusi: kita harus menulis seperti ini:

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

Yang terbaik yang saya temukan di internet untuk ini adalah ngx-navigasi-dengan-data . Ini sangat sederhana dan baik untuk navigasi data dari satu komponen ke komponen lain. Anda hanya perlu mengimpor kelas komponen dan menggunakannya dengan cara yang sangat sederhana. Misalkan Anda memiliki rumah dan tentang komponen dan ingin mengirim data

KOMPONEN RUMAH

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

}

TENTANG KOMPONEN

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

}

Untuk setiap pertanyaan, ikuti https://www.npmjs.com/package/ngx-navigation-with-data

Beri komentar untuk bantuan.