angular 查询服务 URL 查询参数

Question

我正在尝试在 angular 5 中创建一个服务，它将查询 URL 参数，提取所需的参数并将其分配给我创建的特定类型的接口。我试过这个，但它不起作用：

export class UrlQueryService {

  urlParams = {} as UrlQueryParams;

  constructor( private router: Router, private route: ActivatedRoute) {

  }

  getParams() {
    this.route.queryParams.
    subscribe(
      (params: Params) => {
        this.urlParams.id = params['id'];
        this.urlParams.name = params['name']

      }

    )

    return this.urlParams;
  }

}

我想要我的服务 return 参数，但是当我在我的组件中调用此服务时，我得到 'id' 和 'name' undefined

Answer 1

试试这个：

export class UrlQueryService {

  urlParams = {} as UrlQueryParams;

  constructor( private router: Router, private route: ActivatedRoute) {

//subscribe in constructor / onInit
    this.route.queryParams.
    subscribe(
      (params: Params) => {
        this.urlParams.id = params['id'];
        this.urlParams.name = params['name']

      }

    )

//
  }

  getParams() {
    return this.urlParams;
  }

}

订阅一次就够了。当你每次调用该方法时都继续订阅，你会遇到麻烦。

注意：此示例适用于这种情况：URL = "http://someting.com/?param1=ex1&param2=123

在 Heroes 示例中，参数如下所示：“http://something.com/param1/param2 在这种情况下，您可以通过以下代码获取参数：

    this.urlParams.id = this.route.snapshot.params.id;
    this.urlParams.name = this.route.snapshot.params.name;

Answer 2

angular 路由器将参数发送到目标组件，只有它才能读取这些参数。我也有类似的问题，路由器似乎只与目标组件共享参数，而不是服务。

但是，您可以在 RoutesRecognized 等服务中使用路由器事件来访问 url 参数。

angular 查询服务 URL 查询参数

angular service for querying URL query parametrs

query-parameters

angular