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

Question

I have a html table done with Ngprime Datatable, when I do click in a row, throw the next route:

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

In "event.data" I have the register json selected of the html table, If I show the content of "event.data" in a "console.log", will see the concrete json register.

The problem is, when I try to get the json from the component that tries to get it, it does not work correctly, it detects it as an object, but I can not see the object content.

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

This is my path in the routing file configuration:

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

What could be the problem?

Answer 1

You're trying to send a complex object in a route param, don't do this. the router is calling the default to string method which is destroying your data. Instead use a shared service:

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

then in the first component:

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

then in second component:

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

or even better would be to set the parameter as a unique identifier of that data and use the same data source as the table to retrieve the row.