Angular - Passing object to @Input parameter with routerlink

Question

I have an angular component with a @Input parameter as follows.

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {

  @Input() theRecord: Record = null;

  constructor(private _transmissionHistoryService: TransmissionHistoryService) { }
}

In another component I have this in the markup:

<app-transmission-history [theRecord]="selectedRecord"></app-transmission-history>

Perfect. Everything works as expected.

I need to move the app-transmission-history component to a stand alone page. Now I need to access it with routerLink as follows:

<a routerLink='/transmissionHistory'>{{selectedRecord.Name}}</a>

I can't figure out how to set the @Input parameter in the routerlink in the markup. The value I need to set it to is selectedRecord, which I have access to.

I could make changes to the app-transmission-history component to receive the parameter another way. However, it does not seem flexible if I have to change the implementation based on how we get to it.

Answer 1

Use query parameter to pass object after converting to json string.

<a [routerLink]="['/transmissionHistory']"
   [queryParams]="{record:selectedRecord | json }">
    {{selectedRecord.Name}}
</a>

In your component you can do something like this to read params:

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {
  theRecord: Record = null;

  constructor(
      private _transmissionHistoryService: TransmissionHistoryService,
      private _route: ActivatedRoute

   ) { }

   ngOnInit() {
      this._route.params.subscribe(params => {
          this.theRecord = JSON.parse(params.record) as Record;
      });
   }
}

And router config will look like as:

{ path: 'transmissionHistory', component: TransmissionHistoryComponent }

Answer 2

Please take a look at router parameters. You can pass you param like this:

<a [routerLink]="['/transmissionHistory', selectedRecord]">{{selectedRecord.Name}}</a>

Than in you component you can retrive it like this:

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {
  theRecord: Record = null;

  constructor(
      private _transmissionHistoryService: TransmissionHistoryService,
      private _route: ActivatedRoute

   ) { }

   ngOnInit() {
      this._route.params.subscribe(params => {
          this.theRecord = params['record'];
      });
   }
}

Remember to setup this parameter in your router config:

{ path: 'transmissionHistory/:record', component: TransmissionHistoryComponent }