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

Question

是否可以通过 router.navigate 将数据作为参数发送？我的意思是，类似于 this 的例子，正如您所看到的路由有一个数据参数，但是这样做是行不通的：

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

因为某些数据不是有效参数。我怎样才能做到这一点？我不想用 queryParams 发送参数。

Answer 1

这个话题有很多困惑，因为有很多不同的方法。

以下是以下屏幕截图中使用的适当类型：

private route: ActivatedRoute
private router: Router

1) 所需的路由参数：

2）路由可选参数：

3）路由查询参数：

4) 您可以使用服务将数据从一个组件传递到另一个组件，而根本不使用路由参数。

示例见：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

我在这里有一个 plunker：https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Answer 2

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

HOME 组件

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

评论下来寻求帮助。

Answer 3

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

上面的 link 包含这个有用的示例： https://stackblitz.com/edit/angular-bupuzn

Answer 4

最新版本 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);

新组件

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

输出

希望这会有所帮助！

Answer 5

@dev-nish 您的代码只需稍作调整即可运行。让

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

进入

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

然后，如果您想专门发送一种数据类型，例如，JSON 作为表单填写的结果，您可以按照前面解释的相同方式发送数据。

Answer 6

在 navigateExtra 中，我们只能传递一些特定的名称作为参数，否则它会显示如下错误：对于 Ex- 在这里，我想在路由器导航中传递客户密钥，我这样传递-

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

Answer 7

我需要访问 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'
    }

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

Send data through routing paths in Angular

routing

angular

angular-router