将博客 URL 从 id 更改为 title (Contentful & Angular5)答案

【问题标题】：Changing the blog URL from id to title (Contentful & Angular5)将博客 URL 从 id 更改为 title (Contentful & Angular5)
【发布时间】：2018-10-26 10:33:15
【问题描述】：

我正在使用 Contentful 和 Angular 5 创建一个应用程序。一切正常，但是单击博客时的 url 使用 /blog/id，我需要它说 /blog/title 或 /blog/urlslug。这里是它的样子：

http://localhost:4200/blog/Q4YkPptlwAQ0wCIo4oAcI

路由是这样完成的：

  getOneBlog(blogID): Promise<Entry<any>>{
    return this.client.getEntries(Object.assign({
      content_type: 'blog'
    }, {'sys.id': blogID}))
    .then(res => res.items[0]);
  }

  goToBlogDetailsPage(blogId) {

    this.router.navigate(['/blog', blogId]);
  }

和：

  {path: 'blog/:id', component: BlogDetailsPageComponent}

以前有人处理过这个吗？我在内容模型中添加了一个 url slug，但是我不知道如何在其中一个函数中访问 url slug。

【问题讨论】：

标签： javascript angular typescript angular5 contentful

【解决方案1】：

您可以Location from @angular/common 使用样式值更改网址。

例如在您的组件中，一旦加载了博客文章，您可以在 id 之后添加标题，如下所示：

this._location.go(this.blogTitle);

你会有一个像http://localhost:4200/blog/Q4YkPptlwAQ0wCIo4oAcI/someBlogTitle这样的网址。

Here is an stackblitz example for location.

【讨论】：