無法讀取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中的路由參數

回答

相關問題