ส่งข้อมูลผ่านเส้นทางการกำหนดเส้นทางในเชิงมุม

อย่างไรก็ตามมีการส่งข้อมูลเป็นพารามิเตอร์ด้วย router.navigate หรือไม่ ฉันหมายถึงตัวอย่างเช่นนี้คุณสามารถเห็นเส้นทางมีพารามิเตอร์ข้อมูล แต่การทำเช่นนี้มันไม่ทำงาน:

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

เพราะข้อมูลบางอย่างไม่ใช่พารามิเตอร์ที่ถูกต้อง ฉันจะทำสิ่งนั้นได้อย่างไร ฉันไม่ต้องการส่งพารามิเตอร์ด้วย queryParams

มีความสับสนมากมายในหัวข้อนี้เพราะมีหลายวิธีที่จะทำ

นี่คือประเภทที่เหมาะสมที่ใช้ในภาพหน้าจอต่อไปนี้:

private route: ActivatedRoute
private router: Router

1) พารามิเตอร์การกำหนดเส้นทางที่จำเป็น:

2) พารามิเตอร์ทางเลือกเส้นทาง:

3) พารามิเตอร์การค้นหาเส้นทาง:

4) คุณสามารถใช้บริการเพื่อส่งผ่านข้อมูลจากส่วนประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่งโดยไม่ต้องใช้พารามิเตอร์เส้นทางเลย

ดูตัวอย่างได้ที่: 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

รุ่นล่าสุดของเชิงมุม (7.2 +) ตอนนี้มีตัวเลือกในการส่งผ่านข้อมูลเพิ่มเติมโดยใช้NavigationExtras

องค์ประกอบบ้าน

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

เอาท์พุต

หวังว่านี่จะช่วยได้!

@ dev-nish รหัสของคุณใช้งานได้กับการปรับแต่งเล็กน้อยในพวกเขา ทำ

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

เข้าไป

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

จากนั้นหากคุณต้องการส่งชนิดข้อมูลโดยเฉพาะตัวอย่างเช่น JSON ซึ่งเป็นผลมาจากการกรอกแบบฟอร์มคุณสามารถส่งข้อมูลในลักษณะเดียวกับที่อธิบายไว้ก่อนหน้านี้

ใน navigationExtra เราสามารถส่งเฉพาะบางชื่อเป็นอาร์กิวเมนต์มิฉะนั้นจะแสดงข้อผิดพลาดเช่นด้านล่าง: สำหรับอดีต - ที่นี่ฉันต้องการส่งรหัสลูกค้าในการนำทางเราเตอร์และฉันผ่านเช่นนี้ -

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

ดีที่สุดที่ฉันพบได้บนอินเทอร์เน็ตสำหรับเรื่องนี้คือNGX นำทางที่มีข้อมูล มันง่ายมากและดีสำหรับการนำทางข้อมูลจากส่วนประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง คุณต้องนำเข้าส่วนประกอบคลาสและใช้งานในวิธีที่ง่ายมาก สมมติว่าคุณมีบ้านและส่วนประกอบและต้องการส่งข้อมูล

ส่วนประกอบบ้าน

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

แสดงความคิดเห็นลงเพื่อขอความช่วยเหลือ