How do I get query parameters from a URL in angular2?

Problem description

I use angular2.0.0-beta.7. When a component is loaded on a path like "/path?query=value1″", it is redirected to "/path". Why did I delete the get parameter? How do I keep parameters?

A router error has occurred. If I had a main route

@RouteConfig([  {      path: ‘/todos/...‘,      name: ‘TodoMain‘,      component: TodoMainComponent  }])

Same as my kids ' route.

@RouteConfig([  path: ‘/‘, component: TodoListComponent, name: ‘TodoList‘, useAsDefault:true }, { path: ‘/:id‘, component: TodoDetailComponent, name:‘TodoDetail‘ }])

I can't get parameters in Todolistcomponent.

I can get the matrix

params("/my/path;param1=value1;param2=value2") 

But I want the classics.

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

The best solution

Angle 2.0 Final Solution. Appears to RouteParams have been deprecated. Switch

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);}); }} 

If you want to get a query parameter, replace it with the this.activatedRoute.paramsthis.activatedRoute.queryParams

About unsupported Notes

@Reto and @ Codef0rmer very rightly point out that, according to official documentation, unsubscribe() internal component onDestroy() methods are not necessary in this case. This has been removed from my code sample. (see I need to unsubscribe from the section of this tutorial)

Second-best solution

Even if this issue specifies version Beta 7, this issue is also the best search result for Google search results. To do this, here is the answer to the newest router (currently in alpha.7).

The way the parameters were read changed dramatically. First you need to inject a dependency relationship called in your constructor Router , such as:

constructor(private router: Router) { }

After that, we can ngOnInit subscribe to the query parameters on the method (constructors can also, but ngOnInit should be used for testability)

this.router  .routerState  .queryParams  .subscribe(params => {    this.selectedId = +params[‘id‘]; });

In this example, we read the query parameters from the URL, such as example.com?id=41 .

There are some things to note:

1. paramsthe properties that are accessed, such as params[‘id‘] always returning a string, can be + converted to a number by a prefix.

2. The query parameter is observable extracted because it allows re-using to be the same component instance instead of loading a new instance. Each time the query parameter changes, it causes the new events we subscribe to, so we can react to the corresponding changes.

The third solution

I like the answer of @ Steve Paul very much, but we can do the same thing without additional subscription/unsubscribe calls.

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}

Fourth scenario

When a URL like this is such a http://stackoverflow.com?param1=value

You can get param1 by using the following code:

Import {Component, OnInit}From' @angular/core ';import {Router, Activatedroute, Params} from  ' @angular/router '; @Component ({selector: templateurl:  './abc.html ', styleUrls: [export  class abccomponent implements oninit {constructor (Private Route:activatedroute) {} ngOnInit () { Span class= "hljs-comment" >//get param let param1 =  This.route.snapshot.queryparams[ "param1"];}}        

Fifth scenario

First, I found that using Angular2 is a URL with a query string that will be/path;query=value1

To access it using the component you are using, but now follow the code block:

    constructor(params: RouteParams){    var val = params.get("query"); }

This is not the default behavior as to why the component will be removed when it is loaded. I specifically checked for a clean test item that was not redirected or changed. Is it a default route or another special route?

Read the routing of Query strings and parameters in the Angular2 tutorial in https://angular.io/docs/ts/latest/guide/router.html#! #query-parameters

Sixth scenario

You can use Activatedroute to pass query parameters in the URL as follows:

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 = Span class= "hljs-built_in" >console.log ( ' Queryparams ', Data[ Test '])); }} 

Seventh scenario

Hey, you can use Urlsearchparams, you can read more about it here.

Import:

import {URLSearchParams} from "@angular/http";

Function:

getParam(){  let params = new URLSearchParams(window.location.search);  let someParam = params.get(‘someParam‘); return someParam;}

Note: It is not supported by all platforms and seems to be in the "experimental" state by the angle document

Read the original

ANGULAR2 Learning Materials

How do I get query parameters from a URL in angular2?