在Angular中通过路由路径发送数据

在这个话题上有很多困惑，因为有很多不同的方法来做到这一点。

以下是在以下截图中使用的适当类型:

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

我在网上找到的最好的是ngx-navigation-with-data。 它非常简单，非常适合将数据从一个组件导航到另一个组件。 您只需导入组件类，并以非常简单的方式使用它。 假设你有home和about组件，想要发送数据，然后

家组件

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

请在下方评论寻求帮助。

Angular 7.2.0带来了一个新方法

< a href = " https://angular。io / api /路由器/ NavigationExtras #国家noreferrer“rel = > < / > https://angular.io/api/router/NavigationExtras状态

发送:

    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 < / p >

最新版本的angular(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;
}

输出

希望这能有所帮助!

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

成

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

然后，如果你想特别发送一种类型的数据，例如，JSON作为表单填充的结果，你可以用之前解释的相同方式发送数据。

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

我需要访问CustomRouteReuseStrategy中的数据，由于循环依赖，我不能在那里注入Router，但你也可以使用Location对象来读取状态。

Send:


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


Receive:
import { Location } from '@angular/common';


constructor(private location: Location) {
console.log(this.location.getState().example); // should log out 'bar'
}