Angular'daki yönlendirme yollarından veri gönderme

Yine de verileri router.navigate ile parametre olarak göndermek için var mı? Demek istediğim, rotanın bir veri parametresi olduğunu görebileceğiniz gibi, bu örnek gibi bir şey , ama bunu yapmak çalışmıyor:

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

çünkü bazı veriler geçerli bir parametre değildir. Bunu nasıl yapabilirim? Parametreyi queryParams ile göndermek istemiyorum.

Bu konuda çok fazla karışıklık var çünkü bunu yapmanın pek çok farklı yolu var.

Aşağıdaki ekran görüntülerinde kullanılan uygun türler şunlardır:

private route: ActivatedRoute
private router: Router

1) Gerekli Yönlendirme Parametreleri:

2) Rota Opsiyonel Parametreleri:

3) Rota Sorgu Parametreleri:

4) Rota parametrelerini kullanmadan verileri bir bileşenden diğerine aktarmak için bir servisi kullanabilirsiniz.

Bir örnek için bkz. Https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Burada bir dalgıç var: https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Açısal 7.2.0 ile gelen yeni bir yöntem var

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

gönder:

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

at'a:

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

Bazı ek bilgileri buradan alabilirsiniz:

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

Yukarıdaki bağlantı yararlı olabilecek bu örneği içermektedir: https://stackblitz.com/edit/angular-bupuzn

Açısalın son sürümü (7.2 +) artık NavigationExtras kullanarak ek bilgi aktarma seçeneğine sahip .

Ana bileşen

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

Çıktı

Umarım bu yardımcı olur!

@ dev-nish Kodunuz küçük ayarlarla çalışır. yapmak

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

içine

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

özel olarak bir tür veri göndermek istiyorsanız, örneğin bir form dolgusunun sonucu olarak JSON, verileri daha önce açıklandığı şekilde gönderebilirsiniz.

NavigateExtra'da bağımsız değişken olarak yalnızca belirli bir adı geçebiliriz, aksi takdirde aşağıdaki gibi hata gösterir: Ex için - Burada yönlendirici navigasyonunda müşteri anahtarını geçmek istiyorum ve bu şekilde geçiyorum

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

ancak aşağıdaki gibi bir hata gösteriyor:

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'

.

Çözüm: Bu şekilde yazmak zorundayız:

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

Bunun için internette bulduğum en iyi şey veri ile ngx-navigation-navigation . Verilerin bir bileşenden başka bir bileşene yönlendirilmesi çok basit ve iyidir. Bileşen sınıfını içe aktarmanız ve çok basit bir şekilde kullanmanız gerekir. Evinizde ve bileşeniniz olduğunu varsayalım ve veri göndermek istediğinizi varsayalım

EV BİLEŞENİ

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

}

BİLEŞEN HAKKINDA

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

}

Herhangi bir sorgu için https://www.npmjs.com/package/ngx-navigation-with-data adresini takip edin

Yardım için yorum yapın.