2

我正在学习 Angular，作为一个实践项目，我正在为 Docker 容器提供的 Wordpress API 开发前端界面（角度为 13）。

Angular 应用程序必须显示从 API 获得的所有帖子的列表，并且通过使用路由，一旦单击帖子，/post/:id:/:slug/ 中的 /post/:id:/:slug/ 应该只显示请求的帖子。

我的项目代码：https ://www.temporary-url.com/3BD84

我最新的更改/提交，以实现延迟加载：https ://www.temporary-url.com/08C

应用看起来像这样：

应用程序的主页

这些是所谓的一些日志：

主页日志

当点击一篇文章（例如标题为 Hello World 的文章）时，地址栏中的 url 会正确更改为 host:port/post/1/hello-world 并调用以下内容：

点击后日志

  • 但页面的内容不会改变。不显示点击的帖子（单独）。我想有一些路由问题，但一直无法找到它。我究竟做错了什么？
4

1 回答 1

1

路由器尝试按照定义的相同顺序匹配路由。由于您**在帖子页面之前定义了通配符路由。

const routes: Routes = [
  ...
  {
    path: '**',
    component: HomeComponent,
  },
  {
    path: 'post/:id/:slug',
    loadChildren: () => import('./post/post.module').then(m => m.PostModule),
  },
];

当您尝试访问帖子 url 时，路由器会将其与通配符路由匹配并创建一个新的HomeComponent

要解决它，您只需将通配符路由移动到数组的末尾。

干杯

于 2022-01-02T09:28:53.603 回答