Nativescript Angular parameter not getting passed from one component to another

Question

In a TabView template app am trying to pass an id claimid from one component to another when routing. I am arriving at the desired compionent/template but the claimid I am passing is undefined

In my app-routing.module.ts I have

...
{ path: "reports", component: ReportsComponent, outlet: "reportsTab" },
    { path: "report/:reportid", component: ReportComponent, outlet: "reportsTab" },    
    { path: "expense/:clainid", component: ReceiptComponent, outlet: "reportsTab" },    

.... ];

I am navigating by this:

    public OnTapReceipt(claimid) {
    console.log("OnTapReceipt tapped "+claimid);
    this.router.navigate([{
        outlets: {
            reportsTab: ['expense', claimid] 
        }
      }]);
}

In the destination receipt.component.ts I have

import { Router, ActivatedRoute } from "@angular/router";

...

constructor(private router: Router, 
    private expenseService: ExpenseService, 
    private page: Page, 
    private routerExtensions: RouterExtensions, 
    private route: ActivatedRoute) {

}

...

ngOnInit() {
    this.claimid = this.route.snapshot.params["claimid"];
    console.log("Claimid in receipt compt ngOnInit: "+this.claimid);
    this.showReceipt();
}
showReceipt() {
    this.claimid = this.route.snapshot.params["claimid"];

    console.log("Claimid in receipt compt: "+this.claimid);
    //alert("ouch!");
    this.expenseService.getReceipt(this.claimid)
    .subscribe(
        (data) => {
            let output=JSON.stringify(data);
            console.log("receipt in receipt component = "+output.substr(0, 100));
            if (data["reports"]=="No Expenses") {                 
                // No reports to show
            } else {  
                let receipt_filetype=data.file_type;
                let receipt_data=data.img_data;
            }
        },
        (error) => {
            alert("Unfortunately we could not get the receipt.");
        }
    );      
}

And the console shows

JS: OnTapReceipt tapped 26435
JS: Claimid in receipt compt ngOnInit: undefined
JS: Claimid in receipt compt: undefined

Any idea how and why my claimid is being dropped? Thanks.

Answer 1

Try

{ path: "reports", component: ReportsComponent, outlet: "reportsTab" },
{ path: "report/:reportid", component: ReportComponent, outlet: "reportsTab" },    
{ path: "expense/:claimid", component: ReceiptComponent, outlet: "reportsTab" 
},    

clainid != claimid