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


206

无论如何,使用router.navigate将数据作为参数发送?我的意思是,就像这个示例一样,您可以看到路线具有data参数,但是这样做是行不通的:

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

因为some-data不是有效的参数。我怎样才能做到这一点?我不想使用queryParams发送参数。


我认为应该与AngularJS中的其他方式一样,在这里我们可以执行类似$ state.go('heroes',{some-data:“ otherData”})
Motomine

通过路由共享数据的3种简单方法-angulartutorial.net/2017/12/…–
Prashobh,

使用我的方法npmjs.com/package/ngx-navigation-with-data我最后的评论,对每个人都最好
Virendra Yadav

Answers:


561

这个主题有很多困惑,因为有很多不同的方法可以做到这一点。

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

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


1
谢谢您的回答!2)和3)有什么区别?因为两者最终都在URL中添加了“?parameter =“。您能给我一个4)的例子吗?我不知道该怎么做。
Motomine '17

我通过回答进行了更新,以显示不同的URL,并提供了有关如何通过服务传递数据的博客文章和插件的链接。该URL与可选参数和查询参数不同,如上所示。另外,查询参数可以跨路由保留。
DeborahK '17

7
我还有一门有关路由的Pluralsight课程,涵盖了所有这些内容:app.pluralsight.com/library/courses/angular-routing / ...如果您对更多信息感兴趣,可以免费参加一周。
DeborahK '17

3
数据仅在执行的应用程序内“共享”。如果用户刷新页面,则会从服务器重新加载整个应用程序,因此应用程序中不会保留任何先前状态。就普通应用程序而言,当用户刷新它时,就像关闭并重新打开该应用程序一样。如果需要在刷新后保留状态,则需要将其存储在某个位置,例如本地存储或服务器上。
DeborahK

2
只是一个小提示:routetype是 ActivatedRoute,不是Router
Arsen Khachaturyan

195

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


13
鉴于Angular 7中的新功能,这是正确的答案。–
Randy

2
使用这种方法,我将如何处理用户的浏览器刷新?在这种情况下,导航附加功能中的数据似乎消失了,因此没有机会在刷新时再次使用它。
tobi_b

1
@tobi_b我认为您是正确的,刷新后无法达到目的。如果刷新后需要它,则可接受的答案中的方法会更好。
Véger罗兰

3
是的,这就是为什么您只能从构造函数中的this.router.getCurrentNavigation()获取数据的原因。如果在ngOnInit()内部需要其他地方,则可以通过“ history.state”访问数据。在文档中:“状态已传递到任何导航。执行导航时,可以通过router.getCurrentNavigation()返回的extras对象访问此值。导航完成后,当位置时,此值将被写入history.state .go或location.replaceState方法在激活此路由之前被调用。”
Véger罗兰

13
另外,还要确保你不尝试中收到一封额外对象ngOnInit()this.router.getCurrentNavigation().extras
hastrb

35

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

输出量

在此处输入图片说明

希望这会有所帮助!


1

@ dev-nish您的代码进行了一些细微调整。使

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

进入

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

那么如果您要专门发送一种数据类型(例如,JSON)作为表单填充的结果,则可以按照前面说明的相同方式发送数据。


0

在navigationExtra中,我们只能传递一些特定的名称作为参数,否则将显示错误,如下所示:对于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}});

-2

我在互联网上找到的最好的是ngx-navigation-with-data。对于将数据从一个组件导航到另一组件而言,这非常简单且有益。您只需要导入组件类并以非常简单的方式使用它即可。假设您有住所和关于组件,然后想要发送数据

家庭组件

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

评论下来以寻求帮助。


它是以参数形式还是仅在后台传输数据?
Marium Malik

我听不懂@MariumMalik能否请您以描述性的方式提问?
Virendra Yadav

是的,它确实如此@MariumMalik
Virendra Yadav

4
您似乎是此书的作者,而不是“我在互联网上找到”?您也被要求不要垃圾邮件它的角7线程实现类似的功能(github.com/angular/angular/pull/27198
IrishDubGuy
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.