Angular路由参数值返回null，API调用数据异常求助

在Angular应用中，获取路由参数值并通过API调用获取数据时出现异常：浏览器控制台持续输出null和[object Object]，且页面加载时tag值被覆盖为undefined。

相关代码 #

search.service.ts（API调用服务） #

searchByTagCall(tag: string) {
  return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
    switchMap(token => {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
      let params = new HttpParams();
      params = params.append('tag', tag);
      return this.httpClient.get(`${environment.apiUrl}search`, {headers, observe: 'response', params});
    }),
    catchError(err => {
      console.log(err.status);
      if (err.status === 400) {
        console.log(err.error.message);
      }
      if (err.status === 401) {
        this.authService.logout();
        this.router.navigateByUrl('/login', {replaceUrl: true});
      }
      return EMPTY;
    }),
  );
}

home.page.ts（标签点击跳转逻辑） #

searchByTag(tag: string) {
  this.tagsSubscription = this.searchService.searchByTagCall(tag).subscribe((data: any) => {
      this.searchService.tag = data;
      this.router.navigate(['/tag-search/', tag]);
    },
    error => {
      console.log('Error', error);
    });
}

home.page.html（标签渲染） #

<ion-chip *ngFor="let tag of tags">
  <ion-label class="tag" (click)="searchByTag(tag.tags)">{{ tag.tags }}</ion-label>
</ion-chip>

tag-search.page.ts（标签产品展示页面） #

export class TagSearchPage implements OnInit {
  tag: string;
  products: any = [];
  constructor(
    private route: ActivatedRoute,
    private searchService: SearchService,
  ) { }

  ngOnInit() {
    this.showTagProducts();
  }

  showTagProducts() {
    const tag = String(this.route.snapshot.paramMap.get('tag'));

    this.searchService.searchByTagCall(tag).subscribe(
      (data: any) => {
        console.log('Products with tag: ' + tag + '   ' + data);
      },
      error => {
        console.log('Error', error);
      });
  }
}

API返回结构 #

[
  {
    "id": 1283,
    "name": "Some product name",
    "product_code": "470631"
  },
  {
    "id": 786,
    "name": "A different product name",
    "product_code": "460263"
  }
]

1. 路由参数获取异常 #

tag-search.page.ts中直接用String()转换路由参数，若参数不存在会得到"null"字符串，而非undefined。需先校验参数存在性：

showTagProducts() {
  const tagParam = this.route.snapshot.paramMap.get('tag');
  if (!tagParam) {
    console.error('路由参数tag不存在');
    return;
  }
  const tag = tagParam;

  this.searchService.searchByTagCall(tag).subscribe(
    (data: any) => {
      console.log('Products with tag:', tag, data);
    },
    error => {
      console.log('Error', error);
    });
}

2. 打印显示[object Object]的原因 #

searchByTagCall中使用了observe: 'response'，导致HttpClient返回完整的HttpResponse对象，而非API响应体。解决方式二选一：

• 去掉observe: 'response'，直接获取响应数据：

  return this.httpClient.get(`${environment.apiUrl}search`, {headers, params});
  

• 订阅时通过data.body获取响应体：

  (data: HttpResponse<any>) => {
    console.log('Products with tag:', tag, data.body);
    this.products = data.body;
  }
  

3. 多余的API调用 #

home.page.ts的searchByTag方法中，先调用API再跳转属于冗余操作，直接跳转路由即可，由tag-search页面自行获取参数并调用API：

searchByTag(tag: string) {
  this.router.navigate(['/tag-search/', tag]);
}

4. tag值被覆盖为undefined #

• 检查路由配置，确保tag-search路由的参数定义正确：

  // 路由模块中
  {
    path: 'tag-search/:tag',
    component: TagSearchPage
  }
  

• 移除服务中错误的赋值逻辑this.searchService.tag = data（data是HttpResponse对象，并非标签字符串），若需共享标签值，应传递字符串：

  this.searchService.tag = tag;
  

内容的提问来源于stack exchange，提问作者weinde