如何從angular2中的url獲取查詢參數？

問題描述

我使用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。

還有一些事情要注意：

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

2. 查詢參數被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”狀態由角度文檔

閱讀原文

angular2 學習資料

How to Build Nested Model-driven Forms in Angular 2