Angular5中如何在Service中获取URL查询参数？能否用PlatformLocation？

嘿，我懂你现在的困扰——PlatformLocation确实不推荐咱们开发者直接拿来用，官方文档都特意提醒了这一点。那在Angular 5里，怎么在Service里顺顺利利拿到URL的查询参数呢？给你分享两种靠谱的方案：

方案一：使用ActivatedRoute（依赖路由） #

这是Angular官方推荐的方式，适合已经配置了路由的应用：

• 第一步，在你的Service中注入ActivatedRoute：

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Injectable()
export class YourService {
  constructor(private activatedRoute: ActivatedRoute) { }
}

• 然后根据场景获取参数：
  • 如果你要获取初始加载时的静态参数，直接用snapshot就够了：

  getInitialQueryParams() {
    const queryParams = this.activatedRoute.snapshot.queryParams;
    // 对应你的示例URL：http://localhost:4200/index.html?action=show-news&type=1
    console.log(queryParams.action); // 输出 'show-news'
    console.log(queryParams.type); // 输出 '1'
    return queryParams;
  }
  

  • 如果需要监听参数的动态变化（比如路由更新但组件没刷新的情况），可以订阅queryParams：

  listenToQueryParamsChanges() {
    // 记得在合适的时机取消订阅，避免内存泄漏
    const paramsSubscription = this.activatedRoute.queryParams.subscribe(params => {
      console.log('参数更新啦：', params);
      // 在这里处理参数变化后的逻辑
    });
  
    // 比如在组件销毁时取消订阅（如果Service是和组件绑定的）
    // paramsSubscription.unsubscribe();
  }
  

方案二：使用Location + UrlSerializer（不依赖路由） #

如果你的应用没配置Angular路由，或者只是想直接解析当前URL的参数，这个方案更合适：

• 先在Service中注入Location和UrlSerializer：

import { Injectable } from '@angular/core';
import { Location, UrlSerializer } from '@angular/common';

@Injectable()
export class YourService {
  constructor(private location: Location, private urlSerializer: UrlSerializer) { }
}

• 然后解析URL的查询参数：

getUrlQueryParams() {
  // 解析当前URL
  const urlTree = this.urlSerializer.parse(this.location.path());
  const queryParams = urlTree.queryParams;
  
  // 同样能拿到你需要的参数
  console.log(queryParams.action); // 'show-news'
  console.log(queryParams.type); // '1'
  return queryParams;
}

为什么不推荐用PlatformLocation？ #

官方文档之所以提醒不要直接用PlatformLocation，是因为它是Angular内部依赖的底层API，直接使用可能会因为框架版本更新而出现兼容性问题。咱们应该用官方封装好的ActivatedRoute或Location这些上层服务，它们更稳定，也更符合Angular的设计模式。

内容的提问来源于stack exchange，提问作者J. Yu