Angular 4 - 使用导航路由器发送对象作为参数

Question

我用 Ngprime 数据 html table 完成了 table，当我连续点击时，抛出下一条路线：

// First component
    onRowSelect(event) {
    console.log(event.data); // for the moment everything is ok
    this.router.navigate(['/search/' + event.data]);    
}

在"event.data"中我选择了htmltable中的寄存器json，如果我在[=26]中显示"event.data"的内容=],会看到具体的json寄存器.

问题是，当我尝试从试图获取它的组件中获取 json 时，它无法正常工作，它检测到它是一个对象，但我看不到对象内容.

// Second component
this.activatedRoute.params.subscribe((params: Params) => {
    let newRow  = params['newRow'];
    if(newRow) {
    console.log("newRow:", newRow); // This console shows "newRow: [object Object]", here I have the problem
    }
});

这是我在路由文件配置中的路径：

const appRoutes: Routes = [
  {
    path: 'search/:newRow',
    component: MainComponent
  }
];

可能是什么问题？

Answer 1

我想最好的办法是将它字符串化（然后你在另一个组件解析它）：

this.router.navigate(['/search/' + JSON.stringify(event.data)]);

Answer 2

您正在尝试在路由参数中发送复杂对象，请勿这样做。路由器正在调用默认的字符串方法，这会破坏您的数据。而是使用共享服务：

@Injectable()
export class RowDetailService {
    rowDetailSource: BehaviorSubject<any> = new BehaviorSubject(null);
    rowDetail$: Observable<any> = this.rowDetailSource.asObservable();
    setRowDetail(detail:any) {
        this.rowDetailSource.next(detail);
    }
}

然后在第一个组件中：

onRowSelect(event) {
    console.log(event.data); // for the moment everything is ok
    this.rowDetailService.setRowDetail(event.data);
    this.router.navigate(['/search/detail']);    
}

然后在第二个组件中：

this.rowDetailService.rowDetail$.subscribe(row => {
    console.log(row); // do whatever with it
});

或者更好的方法是将参数设置为该数据的唯一标识符，并使用与 table 相同的数据源来检索行。

Angular 4 - 使用导航路由器发送对象作为参数

Angular 4 - To send a object as paramater, using navigate router

angular

primeng-datatable