Angular 6中如何创建获取URL queryParams的方法？现有写法是否可优化？

嘿，我来帮你捋捋这个问题~ 首先得指出你当前代码里的一个关键问题：queryParams.subscribe是异步操作，当你return solutionId的时候，订阅里的赋值逻辑可能还没执行，所以返回的大概率是undefined，这肯定不是你想要的结果。

下面给你几种更优的实现方式，你可以根据自己的场景来选：

1. 同步获取（路由参数不会变化时用） #

如果你的组件初始化后，路由的queryParams不会再更新，那直接用activatedRoute.snapshot就好，它能同步拿到当前路由的参数，不用订阅：

getSolutionId(): number | null {
  // 注意：queryParams里的值都是字符串，要转成number类型
  const solutionIdStr = this.activatedRoute.snapshot.queryParams.solutionId;
  return solutionIdStr ? Number(solutionIdStr) : null;
}

这种方式简单直接，适合大多数初始化时获取参数的场景。

2. 异步返回Observable（路由参数会变化时用） #

如果你的组件在生命周期内，路由的queryParams可能会更新（比如同一个组件跳转到不同参数的路由），那应该返回一个Observable，让调用方来处理异步逻辑：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

getSolutionId(): Observable<number | null> {
  return this.activatedRoute.queryParams.pipe(
    map(queryParams => {
      const solutionIdStr = queryParams.solutionId;
      return solutionIdStr ? Number(solutionIdStr) : null;
    })
  );
}

使用的时候可以这样：

// 在组件逻辑里订阅
this.getSolutionId().subscribe(solutionId => {
  // 拿到id后做后续处理
  if (solutionId) {
    console.log('当前Solution ID:', solutionId);
  }
});

// 或者在模板里用async管道自动处理订阅/取消订阅
<p>当前Solution ID: {{ getSolutionId() | async }}</p>

3. 用async/await转为Promise（适合异步函数场景） #

如果你习惯用async/await的写法，可以把Observable转为Promise：

import { firstValueFrom } from 'rxjs';

// ...

async getSolutionId(): Promise<number | null> {
  // firstValueFrom会取第一个参数值，然后完成Promise
  const queryParams = await firstValueFrom(this.activatedRoute.queryParams);
  const solutionIdStr = queryParams.solutionId;
  return solutionIdStr ? Number(solutionIdStr) : null;
}

使用的时候：

async someFunction() {
  const solutionId = await this.getSolutionId();
  // 处理solutionId
}

小提示 #

别忘了queryParams里的所有值都是字符串类型，所以一定要转成你需要的number类型，避免后续逻辑出现类型错误哦~

内容的提问来源于stack exchange，提问作者C.E James