获取路由查询参数 Angular - Javascript

在一些Web应用程序中，我们经常需要获取浏览器URL中传递的查询参数。在Angular中，我们可以很方便地获取这些查询参数。

获取查询参数

Angular提供了ActivatedRoute服务来获取查询参数。我们需要从Angular的路由中注入ActivatedRoute服务并订阅传递的参数值。

以下是一个示例代码，用于获取用于搜索的查询字符串参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-search-results',
  templateUrl: './search-results.component.html',
  styleUrls: ['./search-results.component.css']
})
export class SearchResultsComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const query = params['q'];
      console.log(query);
      // do something with query
    });
  }

}

在上述代码中，我们在ngOnInit()生命周期钩子中，订阅了路由中的查询参数。在订阅回调函数中，我们可以从params对象中获取查询参数值。在本例中，我们获取了名为q的查询参数值。

URL示例

假设我们有如下URL：https://example.com/search-results?q=angular。在这个URL中，查询参数是q=angular。我们将获取这个查询参数值，以便能够使用它来搜索相关内容。

总结

在Angular中获取路由查询参数十分简单，只需注入ActivatedRoute服务并订阅queryParams对象即可。这样我们就能够轻松地获取URL中的查询参数，方便我们在Web应用程序中进行各种操作。