使用Angular2從url中提取ID

您好我正在嘗試使用Angular2提取url的id部分。使用Angular2從url中提取ID

http://localhost:3000/item/187809

我一直ActiveRoute玩弄內的OnInit但沒有運氣

this.route.queryParams.forEach((params: any) => { 
    console.log("QUERYPARAMS"); 
    console.log(params); 
});

也試過訂閱路線改變這樣

this.routeSub = this.route.queryParams.subscribe(params => { 
    console.log(params); 
    console.log(+params['id']); 
});

但params爲只是一個空的對象。

我定義的路由作爲一個懶惰的路線是這樣

{ 
path: item', 
children: [ 
    { path: ':id', loadChildren: './item/item.module#ItemModule' }, 
] 
},

我認爲問題是，我有一個頭組件和保持延遲加載路由子主要成分。我正在試圖加載標頭組件中的id。

任何想法缺少什麼？

來源

2017-03-16 doorman

我懷疑問題是您使用queryParams而不是僅僅使用params。

params：包含路線特定的必需和可選參數的Observable。

queryParams：包含所有路由可用的查詢參數的Observable。

所以試試這個：

this.route.params.subscribe(params => { 
    console.log(params); 
    console.log(+params['id']); 
});

來源

2017-03-16 16:04:47 MattEnth

this.routeSub = this.route.params.subscribe(params => { 
    console.log(params); 
    console.log(+params['id']); 
});

來源

2017-03-16 16:04:52

1）確保你已經配置了預期id作爲像這樣參數的路線：

{path: 'item/:id', component: SomeItemComponent}

2）您需要導入ActivatedRoute（不是ActiveRoute）並將其注入到組件構造函數中：

constructor(private route: ActivatedRoute) { }

3）內部ngOnInit在同一組件，您可以通過訂閱像這樣訪問的params觀察到的數據：

ngOnInit() { 
    this.route.params.subscribe(params => { 
     console.log(params) //log the entire params object 
     console.log(params['id']) //log the value of id 
    }); 
    }

來源

2017-03-16 17:41:14

感謝您的建議，我完全像這樣，除了路線是懶加載看到更新的問題。但沒有運氣，如果我在chrome中打印params屬性，它會給我一個奇怪的Object __proto__：Object – doorman

我知道我是一個有點晚了回覆，只是在如果您仍遇到問題，請查看Angular文檔。

angular routing tutorial

看一看該鏈接的例子。

開始通過導入ActivatedRoute：

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

然後注入其在構造

constructor(private route: ActivatedRoute) {}

而且在OnInit中（）

ngOnInit(): void { 
    const id = this.route.snapshot.paramMap.get('id'); 
}

和這樣你就不需要直接擔心任何觀察對象。

希望這可以幫助你。

來源

2018-03-09 17:09:56 cgiacomi

使用Angular2從url中提取ID

回答

相關問題