Kirim data melalui jalur perutean di Angular

182

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.

Motomine
sumber
Saya pikir itu harus dengan cara lain seperti di AngularJS, di mana kami dapat melakukan sesuatu seperti $ state.go ('heroes', {some-data: "otherData"})
Motomine
3 cara sederhana untuk berbagi data melalui rute - angulartutorial.net/2017/12/…
Prashobh
Gunakan pendekatan saya npmjs.com/package/ngx-navigation-with-data komentar terakhir oleh saya, terbaik untuk semua orang
Virendra Yadav

Jawaban:

517

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:

masukkan deskripsi gambar di sini

2) Rute Parameter Opsional:

masukkan deskripsi gambar di sini

3) Parameter Parameter Rute:

masukkan deskripsi gambar di sini

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

DeborahK
sumber
Terima kasih atas jawaban Anda! Apa perbedaan antara 2) dan 3)? Karena keduanya akhirnya menambahkan "? Parameter =" di URL. Bisakah Anda memberi saya contoh untuk 4)? Saya tidak tahu bagaimana melakukannya.
Motomine
Saya memperbarui dengan jawaban untuk menunjukkan URL yang berbeda dan untuk menyediakan tautan ke posting blog dan plunker tentang cara mengirim data dengan layanan. URL berbeda dengan parameter opsional dan kueri seperti yang ditunjukkan di atas. Plus parameter kueri dapat dipertahankan di seluruh rute.
DeborahK
6
Saya juga memiliki kursus Pluralsight tentang perutean yang mencakup semua ini: app.pluralsight.com/library/courses/angular-routing/… Anda dapat mendaftar selama seminggu gratis jika Anda tertarik dengan informasi lebih lanjut.
DeborahK
3
Data hanya "dibagikan" dalam aplikasi yang menjalankan. Jika pengguna me-refresh halaman, seluruh aplikasi dimuat ulang dari server, jadi tidak ada keadaan sebelumnya yang dipertahankan dalam aplikasi. Memikirkannya dalam hal aplikasi normal, ketika pengguna menyegarkan itu seperti menutup dan membuka kembali aplikasi. Jika Anda perlu mempertahankan status setelah penyegaran, maka Anda harus menyimpannya di suatu tempat seperti penyimpanan lokal atau di server.
DeborahK
2
Hanya sedikit petunjuk: routetipe itu ActivatedRoute, tidak Router.
Arsen Khachaturyan
156

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

Véger Lóránd
sumber
11
Ini adalah jawaban yang benar mengingat fitur-fitur baru dalam Angular 7.
Randy
2
Dengan pendekatan ini, bagaimana saya menangani penyegaran browser oleh pengguna? Jika demikian, data dalam navigasi tambahan sepertinya hilang, jadi tidak ada kesempatan untuk menggunakannya lagi saat refresh.
tobi_b
1
@ tobi_b Saya pikir Anda benar, setelah menyegarkan Anda tidak dapat mencapainya. Jika Anda membutuhkannya setelah penyegaran, metode dalam jawaban yang diterima akan lebih baik.
Véger Lóránd
3
Yap itu sebabnya Anda hanya bisa mendapatkan data dari this.router.getCurrentNavigation () di konstruktor. Jika Anda membutuhkannya di tempat lain seperti di dalam ngOnInit (), Anda dapat mengakses data melalui "history.state". Dari dokumentasi: "Status diteruskan ke navigasi apa pun. Nilai ini akan dapat diakses melalui objek ekstra yang dikembalikan dari router.getCurrentNavigation () saat navigasi dijalankan. Setelah navigasi selesai, nilai ini akan ditulis ke history.state ketika lokasi .go atau location.replaceState dipanggil sebelum mengaktifkan rute ini. "
Véger Lóránd
8
Juga pastikan Anda tidak mencoba menerima objek ekstra dalam ngOnInit()asthis.router.getCurrentNavigation().extras
hastrb
26

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

masukkan deskripsi gambar di sini

Semoga ini bisa membantu!

dev-nish
sumber
1

@ 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.

Saurav Mohan V
sumber
0

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}});
A. PRABIN SARAB
sumber
-2

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.

Virendra Yadav
sumber
Apakah itu mentransfer data dalam bentuk params atau hanya di latar belakang?
Marium Malik
Saya tidak mengerti @MariumMalik Bisakah Anda bertanya dengan cara deskriptif?
Virendra Yadav
Ya, itu @MariumMalik
Virendra Yadav
3
Anda tampaknya menjadi penulis ini, daripada "saya temukan di internet"? Anda juga diminta untuk tidak mengirim spam ke utas Angular 7 yang mengimplementasikan fungsi serupa ( github.com/angular/angular/pull/27198 )
IrishDubGuy