Angular 2通過子路由獲取url參數

我剛學習如何使用Angular 2，目前我正在使用路由。我想要做的是使用子路由獲取路由參數。Angular 2通過子路由獲取url參數

我目前正在研究可顯示用戶詳細信息的應用程序。該網址看起來像這樣。

本地主機：4200 /用戶/ ID /細節

對於這種應用我使用的是UserComponent和嵌套在用戶文件夾中的DetailsComponent。我只想更改網址並在我的組件中獲取網址。

我正在做的嘗試和獲取網址是在DetailsComponent的構造函數中使用'@ angular/router'的ActivatedRoute並將其分配給id屬性，我使用字符串插值在模板中查看它。以下是來自DetailsComponent的實際代碼：

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { Subscription } from 'rxjs/Rx'; 

@Component({ 
selector: 'app-details', 
templateUrl: './details.component.html', 
styles: [] 
}) 
export class DetailsComponent implements OnInit, OnDestroy { 


id: string; 

private subscription : Subscription; 

constructor(private router: Router, private activatedRoute: ActivatedRoute) { 
    this.subscription = activatedRoute.params.subscribe(
     (param: any) => this.id = param['id'] 
    ); 
} 

ngOnInit() { 
} 

ngOnDestroy() { 
this.subscription.unsubscribe(); 
} 
}

但是，參數未更新並顯示在模板文件中。這種方法很有效，因爲它是我在另一個組件中使用的確切代碼，並且我能夠在模板文件中顯示id。所以一切似乎都已到位。路由器插座位於正確的位置，並且路由和子路由的定義正確，因爲模板文件沒有加載，它只是不顯示來自url段的id。

這基本上是我如何使用稍後某種數據庫的圖像工作，而我基本上只是希望能夠抓取該段以便稍後從數據庫獲取信息。所以我只是不確定爲什麼這不起作用。我應該爲此使用queryParameters嗎？還是可以這樣做有一個漂亮的網址？如果是這樣，我做錯了什麼？

這裏是app.routing.ts文件

import { Routes, RouterModule } from '@angular/router'; 

import { HomeComponent } from './home/home.component'; 
import { ProductComponent } from './product/product.component'; 
import { ProductsComponent } from './products/products.component'; 
import { UserComponent } from './user/user.component'; 
import { USER_ROUTES } from './user/user.routes'; 

const APP_ROUTES: Routes = [ 
{ path: 'user/:id', component: UserComponent, children: USER_ROUTES }, 
{ path: 'user', component: UserComponent }, 
{ path: 'products/:id', component: ProductsComponent }, 
{ path: 'products', component: ProductComponent }, 
{ path: '', component: HomeComponent } 

]; 

export const routing = RouterModule.forRoot(APP_ROUTES);

在細節HTML模板這些路線在用戶目錄

import { Routes } from '@angular/router'; 

import { DetailsComponent } from './details.component'; 
import { EditComponent } from './edit.component'; 

export const USER_ROUTES: Routes = [ 
{ path: 'details', component: DetailsComponent }, 
{ path: 'edit', component: EditComponent } 
];

這裏定義的路由我有

<p>You are currently viewing the details of User number {{ id }}.</p>

在用戶html模板我有

<p>User Component</p> 
<router-outlet></router-outlet>

來源

2017-02-25 Kaley36

您可以發佈您的路線定義路線配置.. –

後所有的相關代碼：路由定義，模板等話說這一切都設置正確並不能真正幫助我們瞭解它是如何的建立。 –

你試圖從路線

{ path: 'details', component: DetailsComponent }

不具有任何id參數的組件內部訪問路線

{ path: 'user/:id', component: UserComponent, children: USER_ROUTES }

的參數（id）但是是具有此參數的路線的子節點。因此，您需要從父路由獲取參數：

this.subscription = activatedRoute.parent.params.subscribe(
    (param: any) => this.id = param['id'] 
);

來源

2017-02-25 17:52:55

是的，我確定你的權利，並且我對路線進行了一些調整，以便：id在路線的子部分中，並且工作正常。現在的url看起來像這樣：localhost：4200/user/details/99>我想爲了使用其他方式，我必須通過某個服務的id傳遞id？ – Kaley36

正如我在我的回答中所說的，您必須從父路線中獲取ID。 –

-2

從'@ angular/router'導入{Router，ActivatedRoute，ParamMap};

構造（私人路線：ActivatedRoute，私人路由器：路由器）{

設ID = this.route.snapshot.parent.paramMap.get（ '編號'）;

}

來源

2017-12-06 20:07:20 VinothSethupathy

請解釋並正確地格式化代碼，以便答案可能有所幫助。 –

Angular 2通過子路由獲取url參數

回答

相關問題