在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...
  }
}

当前回答

简单的解决方案

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

2020-03-26 19:15:11

其他回答

这对我很管用。我已经在路由模块中使用了子路由。


 this.route.firstChild.snapshot.paramMap.get('id');

2022-03-09 16:05:20

/*
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

我认为是Angular 8:

ActivatedRoute。params已被ActivatedRoute.paramMap取代 ActivatedRoute。queryParams已被ActivatedRoute.queryParamMap取代

2020-04-20 11:43:31

当我在寻找类似的解决方案时偶然发现了这个问题，但我不需要像完整的应用程序级路由或更多导入模块之类的东西。

下面的代码非常适合我使用，不需要额外的模块或导入。

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost: 4200 / ? param1 = hello&param2 = 123输出:

param1 = hello
param2 = 123

2018-05-03 16:51:31

它对我的作用是:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

如何在angular2中从url获取查询参数?

2018-01-06 22:23:40

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

推荐文章

最新文章

标签