当用户点击 Angular 和 Strapi 中的博客时，在 URL 中显示 Slug答案

【问题标题】：Show the Slug in the URL when a user clicks on a Blog in Angular and Strapi当用户点击 Angular 和 Strapi 中的博客时，在 URL 中显示 Slug
【发布时间】：2022-07-17 00:15:46
【问题描述】：

当用户点击博客时，我希望 URL 显示 slug 而不是 ID。我使用 Angular 作为前端框架，我在其中创建了一个服务来从后端调用数据。我用 Strapi 做后端。每当我从视图中选择博客时，URL 都会显示 ID 而不是 Slug。


http://localhost:4200/pagina/3

而我想要的是这样的：


http://localhost:4200/pagina/the-shrimp-is-awesome

这是我的 Angular 服务。如您所见，名为“getData”的第一个方法调用了按ID DESC排序的所有博客条目，而名为“getDataById”的第二个方法调用了将参数设置为ID的唯一博客的详细信息，我认为我应该这样做适当的调整。



import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class StrapiService {

  REST_API: string ='http://localhost:1337/articles';
  //https://strapi-dot-gmal-api-313723.uc.r.appspot.com/
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  constructor(private httpClient: HttpClient) { }




  getData():Observable<any>{

    let API=this.REST_API + '?_sort=id:DESC';
    return this.httpClient.get(API,{headers:this.httpHeaders}) .pipe(
      map((data:any) => { 
        return data;
      }), catchError( error => {
        return throwError(error);
      })
    )
    
  }




  getDataById(id):Observable<any>{

    let API_ID=this.REST_API+"?id="+id;
    return this.httpClient.get(API_ID,{headers:this.httpHeaders}) .pipe(
      map((data:any) => { 
      
        return data;
      }), catchError( error => {
        return throwError(error);
      })
    )
    
  }


 
}

这是我的 blog-routing.module，我尝试将路径从：pagina/:id' 更改为 'pagina/:slug'，但它也不起作用。


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogComponent } from './blog/blog.component';
import { PaginaComponent } from './blog/pagina/pagina.component';
import { CategoriasComponent } from './categorias/categorias.component';
import { DetalleComponent } from './categorias/detalle/detalle.component';

const routes: Routes = [
    { path: 'blog', component: BlogComponent },
    { path: 'pagina/:id', component: PaginaComponent },
    { path: 'categorias/:category', component: CategoriasComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BlogRoutingModule { }

这是我的浏览器图像，显示了我的 Strapi 后端条目的字段。字段“slug”也已填充。

【问题讨论】：

如果您没有收到答案，您可以通过在其上放置bounty 来引起对您的问题的关注
好的，这对 StepUp 很有帮助！感谢您的建议！
您是否有现有的枚举或可以用来将 id 与 slug 相关联的东西？如果是这样，您可以创建一个指令，例如将 url 转换为适当的 slug url，但理想情况下，您会在后端执行此操作，因此返回数据已经将其作为对象中的附加键/值包含在绑定中使用.由于我们无法深入了解这些细节，因此很难为您的问题提供明确的答案。
你好克里斯 W.！我分享了一个浏览器请求的图像，您可以在其中看到来自 Strapi 后端的帖子，正如您所看到的“slug”也已填充，但我不太确定如何在 URL 中显示它而不是身份证。
如果您只想更改 URL，那么您需要更改被点击组件的 html 模板以进行路由。如果链接当前类似于 Link to the Shrimp is Awesome Blog 则将其更改为链接到 Shrimp is Awesome Blog 以获取 URL localhost:4200/pagina/3/the-shrimp-is-awesome 。或者完全忽略 URL 中的 id，但必须查找它或以不同的方式传递它。

标签： javascript angular blogs strapi

【解决方案1】：

您必须从您的strapi 后端创建一个自定义控制器，并将默认的 findOne 参数覆盖为 slug。

默认情况下，strapi 使用 id 字段来查询集合中的单个项目。

Here is a link to the reference in their documentation

希望有帮助吗？

【讨论】：