Question

我尝试在角度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;
  }

}

我想要我的服务返回参数，但是当我在我的组件中调用此服务时，我得到了＆＃39; id＆＃39;和＆＃39; name＆＃39;未定义

Answer 1

试试这个：

＆＃13;

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

＆＃13;

一次订阅就足够了。当你每次打电话给方法时都要订阅，你将面临麻烦。

注意：此示例适用于以下情况：网址=＆＃34; http://someting.com/?param1=ex1&param2=123

在英雄的例子中，参数看起来像这样：＆＃34; http://something.com/param1/param2 在这种情况下，您可以通过以下代码获取参数：

＆＃13;

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

＆＃13;

Answer 2

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

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

用于查询URL查询参数的角度服务

2 个答案: