Question

我有一个primeng数据表，我想通过路由器将选定的行传递给其他页面。例如：我有一个学生数据表，当我选择一个学生行并单击提交按钮时，它应该在StudentDetails页面中显示详细信息。

在这里，我可以选择行并能够将数据传递给学生组件。但无法将数据传递给学生详细信息组件。

export class Student {

selectedRow:Student;// I can able to assign selected row here

navigateStudentDetail(){

this.router.navigate(['./studentdetail']);

}

我可以使用查询参数传递studentId，但我想将学生对象传递给studentdetails组件。但无法做到这一点。

有没有简单的方法来实现这一目标？请帮帮我

Answer 1

使用服务只是为了将一些参数传递给另一个组件可能有点过分。您可以使用NavigationExtras添加自定义数据以及要导航到的Url。

import { NavigationExtras} from '@angular/router';
//You will need navigations extras from Router.

你组件中的某个地方..

      let dataNav:NavigationExtras={queryParams:"somekey":"someValue",
"someOtherKey":"someOtherValue"}};
  this.router.navigate(['/path/whatever/'],dataNav);

然后在目标组件中..

import { Router, ActivatedRoute, Params } from '@angular/router';
//you will need something like this

在你的构造函数中实例化ActivatedRoute

constructor(
private route: ActivatedRoute,
private router: Router){}

最终获得第一个组件发送的参数..

  ngOnInit() {
this.route.queryParams
.subscribe(params =>{
  this.someOtherKeyReceived=params['someOtherKey']
});

}

Angular2 Primeng数据表选择使用路由器传递给其他组件的行

1 个答案: