問題描述

我使用angular2.0.0-beta.7。當組件在像”/path?query=value1″這樣的路徑上加載時，它被重定向到”/path”。為什麽刪除了GET參數？如何保留參數？

路由器出現錯誤。如果我有一條主路線

@RouteConfig([
{
path: ‘/todos/...‘,
name: ‘TodoMain‘,
component: TodoMainComponent
}
])
和我的孩子路線一樣

@RouteConfig([
{ path: ‘/‘, component: TodoListComponent, name: ‘TodoList‘, useAsDefault:true },
{ path: ‘/:id‘, component: TodoDetailComponent, name:‘TodoDetail‘ }
])
我不能在TodoListComponent中獲取參數。

我可以得到矩陣

params("/my/path;param1=value1;param2=value2")
但我想要經典

query params("/my/path?param1=value1&param2=value2")

最佳解決方案

角2.0最終解決方案。看來RouteParams已被棄用。改為：

import {Router, ActivatedRoute, Params} from ‘@angular/router‘;
import {OnInit, OnDestroy, Component} from ‘@angular/core‘;

@Component({...})
export class MyComponent implements OnInit, OnDestroy {

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit() {
// subscribe to router event
this.activatedRoute.params.subscribe((params: Params) => {
let userId = params[‘userId‘];
console.log(userId);
});
}

}
如果要獲取查詢參數，請將this.activatedRoute.params替換為this.activatedRoute.queryParams

關於不支持的說明

@Reto和@ codef0rmer非常正確地指出，根據官方文檔，unsubscribe()內部的組件onDestroy()方法在這種情況下是不必要的。這已從我的代碼示例中刪除。 (請參閱我需要取消訂閱this教程的部分)

次佳解決方案

即使這個問題指定版本beta 7，這個問題也是谷歌搜索結果的最佳搜索結果。為此，這裏是最新的路由器的答案(目前在alpha.7)。

讀取參數的方式發生了巨大變化。首先你需要在你的構造函數中註入一個叫做Router的依賴關系，比如：

constructor(private router: Router) { }
之後，我們可以在ngOnInit方法上訂閱查詢參數(構造函數也可以，但ngOnInit應該用於可測試性)

this.router
.routerState
.queryParams
.subscribe(params => {
this.selectedId = +params[‘id‘];
});
在本例中，我們從URL讀取查詢參數，如example.com?id=41。

還有一些事情要註意：

訪問params的屬性，如params[‘id‘]總是返回一個字符串，可以通過+前綴將其轉換為數字。

查詢參數被observable提取的原因是它允許re-using是相同的組件實例，而不是加載一個新的實例。每次查詢參數更改時，都會導致我們訂閱的新事件，因此我們可以對相應的更改做出反應。

第三種解決方案

我非常喜歡@史蒂夫·保羅的回答，但我們可以做同樣的事情，無需額外的訂閱/取消訂閱電話。

import { ActivatedRoute } from ‘@angular/router‘;
constructor(private activatedRoute: ActivatedRoute) {
let params: any = this.activatedRoute.snapshot.params;
console.log(params.id);
// or shortcut Type Casting
// (<any> this.activatedRoute.snapshot.params).id
}

第四種方案

當一個這樣的URL這樣的http://stackoverflow.com?param1=value

您可以通過以下代碼獲取param1：

import { Component, OnInit } from ‘@angular/core‘;
import { Router, ActivatedRoute, Params } from ‘@angular/router‘;

@Component({
selector: ‘‘,
templateUrl: ‘./abc.html‘,
styleUrls: [‘./abc.less‘]
})
export class AbcComponent implements OnInit {
constructor(private route: ActivatedRoute) { }

ngOnInit() {
// get param
let param1 = this.route.snapshot.queryParams["param1"];
}
}

第五種方案

首先，我發現使用Angular2的是具有查詢字符串的url將是/path;query=value1

要使用您使用的組件訪問它是這樣的，但現在遵循代碼塊：

constructor(params: RouteParams){
var val = params.get("query");
}
至於為什麽在加載組件時會被刪除，這不是默認行為。我特別檢查了一個幹凈的測試項目，沒有被重定向或更改。它是默認路由還是其他特殊的路由？

請閱讀https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters中Angular2教程中的查詢字符串和參數的路由

第六種方案

您可以使用ActivatedRoute在URL中傳遞查詢參數，如下所示：

url： – http：/domain.com？test = abc

import { Component } from ‘@angular/core‘;
import { ActivatedRoute } from ‘@angular/router‘;

@Component({
selector: ‘my-home‘
})
export class HomeComponent {

constructor(private sharedServices : SharedService,private route: ActivatedRoute) {
route.queryParams.subscribe(
data => console.log(‘queryParams‘, data[‘test‘]));
}

}

第七種方案

嗨，你可以使用URLSearchParams，你可以閱讀更多關於它的here。

進口：

import {URLSearchParams} from "@angular/http";
功能：

getParam(){
let params = new URLSearchParams(window.location.search);
let someParam = params.get(‘someParam‘);
return someParam;
}
註意：它不受所有平臺的支持，似乎在”EXPERIMENTAL”狀態由角度文檔

angular4 頁面參數獲取