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.

I see clainid in the route definition and claimid in the code. Make sure to use the same name in both places. — Martin Parenteau
– Martin Parenteau, Commented Feb 8, 2019 at 17:07
If you still have issues, please share a Playground Sample where the issue can be reproduced. — Manoj
– Manoj, Commented Feb 8, 2019 at 17:53

Zuriel · Accepted Answer · 2019-02-08 17:08:36Z

2

Try

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

clainid != claimid

answered Feb 8, 2019 at 17:08

Zuriel

1,8581 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nativescript Angular parameter not getting passed from one component to another

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related