Angular项目中如何实现博客详情跳转链接并通过ID加载详情内容

核心问题梳理 #

现有代码存在4个需要调整的点：

• 跳转时传递的是数组索引而非博客真实ID
• 路由跳转路径使用相对路径，和配置的全局路由不匹配
• Strapi服务没有封装根据ID查询单篇博客的方法
• 详情页直接把Observable赋值给数据变量，没有订阅获取返回值

1. 修改博客列表页跳转逻辑 #

修改blog.component.html里的跳转按钮，传递真实的博客ID，改用绝对路由路径：

<!-- 替换原有的跳转按钮代码 -->
<a [routerLink]="['/pagina', data.id]" class="btn">Leer más</a>

2. 扩展Strapi服务，新增单篇查询接口 #

在strapi.service.ts中添加根据ID查询单篇博客的方法：

// 在现有getData方法下方新增
getArticleById(id: number | string): Observable<any> {
  const API = `${this.REST_API}/${id}`;
  // 如果Strapi需要返回嵌套字段（比如关联的分类、图片），把上面地址改成 `${this.REST_API}/${id}?populate=*`
  return this.httpClient.get(API, {headers: this.httpHeaders}) .pipe(
    map((data:any) => data), 
    catchError( error => throwError(error))
  )
}

3. 修改详情页逻辑，正确获取数据 #

修改pagina.component.ts，订阅接口获取详情数据，把请求逻辑移到ngOnInit生命周期：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { StrapiService } from '../../../../services/strapi.service';

@Component({
  selector: 'app-pagina',
  templateUrl: './pagina.component.html',
  styleUrls: ['./pagina.component.scss']
})
export class PaginaComponent implements OnInit {
  data:any = {};
  errores:string="";

  constructor( 
    private activatedRoute: ActivatedRoute,
    private router: Router,
    public strapiserv:StrapiService
  ){ }

  ngOnInit(): void {
    // 从路由参数获取博客ID
    const articleId = this.activatedRoute.snapshot.params['id'];
    // 调用接口获取详情
    this.strapiserv.getArticleById(articleId).subscribe(res => {
      this.data = res;
    }, error => {
      console.log(error);
      if(error.status == 0){
        this.errores="Código del error: "+error.status+" \n Ha ocurrido un error del lado del cliente o un error de red.";
      }else if(error.status == 404){
        this.router.navigate(['/blog']); // 不存在的博客ID直接跳回列表页
      }else{
        this.errores="Código del error: "+error.status+"\n\n"+error.statusText;
      }
    })
  }
}

可选优化 #

• 给博客数据定义TS类型，替换any类型提升代码安全性
• 详情页加载时添加loading状态，提升用户体验
• 列表页可以做数据缓存，避免每次返回都重新请求全量列表

内容的提问来源于stack exchange，提问作者Luis Alejandro López de Anda