无法读取Angular 2中的路由参数

我已经成功地在Angular JS中为我的其他组件在同一个项目和新组件中实现了路由参数，但它不起作用，我无法理解代码中的问题。无法读取Angular 2中的路由参数

下面是我的路线的代码文件

import { Routes, RouterModule } from '@angular/router'; 
import { CustomerBillComponent } from '../components/customer_bill.component'; 

const routes: Routes = [ 
    { path: 'add-bill', component: CustomerBillComponent }, 
    { path: 'add-bill/:customer_reference', component: CustomerBillComponent }, 
]; 

export const routing = RouterModule.forRoot(routes);

（我尝试使用不同的路线还可以，但没有奏效）

下面是我的CustomerBillComponent.ts文件中的代码

ngOnInit() { 
    //When I visit /#/add-bill/CR452152 
    let route_location = location['hash'].split('/')[1].toLowerCase(); 
    console.log(route_location); //prints add-bill in Console 
    var customer_reference = this.route.snapshot.params['customer_reference']; 
    console.log(customer_reference); //prints undefined 
}

我错过了什么

在此先感谢！

来源

2017-04-12 Akshay Khale

同样的问题，相同的结果 – Sajad

您是否找到任何解决方案？ – Sajad

您需要添加ModuleWithProviders。它是模块提供者的包装。

import {ModuleWithProviders} from '@angular/core'; 

export const routing: ModuleWithProviders = RouterModule.forRoot(router);

来源

2017-04-12 07:01:48 digit

在哪个文件组件，模块或路由中？ –

您的路线文件请。 Ty – digit

我试过了，但'customer_reference'仍然是'undefined'，感谢您的帮助... –

首先尝试：

this.route.params.subscribe(
    (params) => { 
    console.log(params); 
    } 
)

，看看你会得到什么。如果这不起作用，很可能是您尝试访问父路由的参数，在这种情况下，您必须在路由器树中加入以访问它。因为你需要

this.route.parent.params.subscribe(
    (params) => { 
    console.log(params); 
    } 
)

多次：

你可以用.parent财产，像这样做。

来源

2017-04-12 09:14:43 Chrillewoodz

o/p：'Object {}' –

@AkshayKhale对于两者？ – Chrillewoodz

我面临几乎相同的问题。但原因不同。

在我的方案中，借出页面（在路由上指定的组件）是不同的，我试图访问父路由组件上的路由参数。

下面是证明我的方案代码：

home.module.routing.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
//other import statements... 
const routes: Routes = [ 
    { 
    path: 'home', component: HomeComponent, 
    children: [ 
     { path: 'buy/:mainType/:subType', component: BuyComponent, data: {} }, 
     { path: 'buy/:mainType', component: BuyComponent, data: { } }, 
     { path: '', redirectTo: 'buy', pathMatch: 'full' }, 
    ] 
    }, 
    { path: 'checkout', component: CheckoutCartComponent }, 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class HomeRoutingModule { }

所以，我不得不访问HomeComponent（父）和贷款的RouteParam值页面是BuyComponent（HomeComponent的子路径）。

所以，我没有得到航线的值PARAMS使用下面的代码：

//内部HomeComponent.ts

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     this.routeText = params['category']; 
     this.title = this.formatTitle(this.routeText); 
    }); 
}

由于借贷页面BuyComponent，上面的代码将无法正常工作。 Angular允许以上述方式仅在着陆组件上访问路由参数。

我试了很多，最后得到了一个解决方案来访问父路由组件中的路径参数。

下面是访问相同的代码：

//内部HomeComponent.ts

const routeChildren = this.activatedRoute.snapshot.children; 
if (routeChildren.length) { 
    //Your code here to assign route params to the Component's Data Member. 
}

因此，访问this.activatedRoute.snapshot.children代替this.route.params奏效了我。

希望这会有助于如果有人在这里寻找像我这样的问题。

最好的问候。

来源

2017-10-12 11:22:26

无法读取Angular 2中的路由参数

回答

相关问题