Nativescript Angular參數未從一個組件傳遞到另一個組件

Question

在TabView模板應用中，正在嘗試在路由時將ID索賠ID從一個組件傳遞到另一個組件。 我正在到達所需的組分/模板，但我傳遞的Claimid 不確定

在我的app-routing.module.ts中

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

....];

我正在導航：

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

在目標收據.component.ts中

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.");
        }
    );      
}

控制台顯示

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

知道如何以及為什么要刪除我的索賠編號嗎？ 謝謝。

Answer 1

嘗試

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

clainid！=索賠編號