在Angular 5中如何从URL中获取查询参数?

我使用的是angular 5.0.3，我想用一堆查询参数启动我的应用程序，比如/app?param1=hallo&param2=123。如何在Angular 2中从url中获取查询参数?对我没用。

有什么想法如何获得查询参数工作?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

这个私有函数帮助我获取参数，但我认为在新的Angular环境中这不是正确的方式。

(更新:) 我的主应用程序是这样的

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

当前回答

你也可以使用HttpParams，比如:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

2018-09-28 15:04:30

其他回答

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

2020-02-12 08:02:46

import { ParamMap, Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

更新

import { Router, RouterStateSnapshot } from '@angular/router';

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

2017-11-23 12:52:42

当你有一个空路由对象时，这主要是因为你没有在app.component.html中使用路由器出口。

如果没有这个，你将无法获得一个有意义的非空子对象的路由对象，特别是params和queryParams。

尝试添加<router-outlet><router-outlet> < app-main-component > < / app-main-component >

在此之前，确保你在App -routing >中准备好了查询参数，它导出了App组件使用的类Route:

param: '/param/:dynamicParam', path: MyMainComponent

当然，最后一件事，为了获得你的参数，我个人使用this.route.snapshot.params.dynamicParam，其中dynamicParam是在你的app-routing组件中使用的名称:)

2017-11-23 16:23:37

小心你的路线。“redirectTo”将删除|删除任何查询参数。

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

我用查询参数调用主组件，比如“/main?”param1=a&param2=b，并假设我的查询参数在重定向转发生效之前到达主组件中的“ngOnInit()”方法。

但这是错误的。重定向将出现在前面，删除查询参数并在没有查询参数的情况下调用主组件中的ngOnInit()方法。

我把第三条路线改成了

{path: "", component: PageOneComponent},

现在我的查询参数可以在主要组件ngOnInit和PageOneComponent中访问。

2017-11-24 08:53:54

不幸的是，最干净的解决方案并不是最可扩展的解决方案。在Angular的最新版本中，其他答案中建议你可以使用ActivatedRoute injectable，特别是使用snapshot属性，轻松获取查询参数:

this.route.snapshot.queryParamMap.get('param')

或者订阅属性(在查询字符串会更新的情况下使用，例如通过用户id导航):

this.route.queryParamMap.subscribe(params => console.log(params));

我在这里告诉你，这些解决方案有一个巨大的缺陷，一段时间没有得到解决:https://github.com/angular/angular/issues/12157

总而言之，唯一的防弹解决方案是使用优秀的老香草javascript。在本例中，我为URL操作创建了一个服务:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

2020-02-20 21:44:05

在Angular 5中如何从URL中获取查询参数?

推荐文章

最新文章

标签