我的应用程序的 RouterModule 不是延迟加载帖子

Question

我正在学习 Angular 作为练习项目，我正在为一个 API 服务的 Wordpress API 开发一个 front-end 界面（angular 13） =47=]容器。

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

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

我最新的changes/commits，实现延迟加载：https://www.temporary-url.com/08C

应用看起来像这样：

这些是被调用内容的一些日志：

单击 post 时（例如标题为 Hello World 的那个），地址栏中的 url 正确更改为主机：port/post/1/hello-world 并调用以下内容：

但页面内容没有改变。单击的 post 不显示（单独）。我想有一些路由问题，但一直没能找到它。我做错了什么？

Answer 1

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

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

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

要解决这个问题，您只需将通配符路由移动到数组的末尾即可。

干杯

我的应用程序的 RouterModule 不是延迟加载帖子

My app's RouterModule isn't lazy loading posts

angular

angular-routing

angular-router

angular-routerlink

angular-lazyloading