我的应用程序的 RouterModule 不是延迟加载帖子
My app's RouterModule isn't lazy loading posts
我正在学习 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 不显示(单独)。我想有一些路由问题,但一直没能找到它。我做错了什么?
路由器尝试按照定义的相同顺序匹配路由。由于您在 post 页面之前定义了通配符路由 **
。
const routes: Routes = [
...
{
path: '**',
component: HomeComponent,
},
{
path: 'post/:id/:slug',
loadChildren: () => import('./post/post.module').then(m => m.PostModule),
},
];
当您尝试访问 post url 时,路由器会将其与通配符路由匹配并创建新的 HomeComponent
要解决这个问题,您只需将通配符路由移动到数组的末尾即可。
干杯
我正在学习 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 不显示(单独)。我想有一些路由问题,但一直没能找到它。我做错了什么?
路由器尝试按照定义的相同顺序匹配路由。由于您在 post 页面之前定义了通配符路由 **
。
const routes: Routes = [
...
{
path: '**',
component: HomeComponent,
},
{
path: 'post/:id/:slug',
loadChildren: () => import('./post/post.module').then(m => m.PostModule),
},
];
当您尝试访问 post url 时,路由器会将其与通配符路由匹配并创建新的 HomeComponent
要解决这个问题,您只需将通配符路由移动到数组的末尾即可。
干杯