Question

在TabView模板应用中，正在尝试在路由时将ID声明ID从一个组件传递到另一个组件。我到达了所需的组分/模板，但我传递的Claimid是 undefined

在我的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！= Claimid

Nativescript Angular参数未从一个组件传递到另一个组件

1 个答案: