angular4 頁面參數獲取

問題描述

我使用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」狀態由角度文檔