Angular 路由器导航更改 url，但不渲染组件

Question

我正在开发一个带有路由和路径参数的角度应用程序。单击按钮即可调用一个函数，将用户重定向到具有相同路径参数的新 URL。虽然浏览器中的URL发生变化，但app-routing.module.ts中定义的相应组件并未加载。如果我再次刷新页面，则会呈现正确的页面。

这个想法是，学生获得一个带有哈希标记的唯一 URL（例如/student/33192c29aa8e449e94f3a1c4eef43ca8），这向他展示了一些指导原则。然后点击一下，他应该被转发到具有相同令牌的注册页面（例如/student/registration/33192c29aa8e449e94f3a1c4eef43ca8）

应用程序路由.module.ts

const routes: Routes = [
  ...
  { path: 'student/registration/:token', component: RegistrationsComponent },
  { path: 'student/:token', component: GuidelinesComponent },
  ...
];

指南.component.html

forwardToRegistration(): void {
  this.router.navigateByUrl('/student/registration/' + this.studentToken);
}

URL 在浏览器中正确更新，但 RegistrationComponent 未呈现。

感谢您的帮助！

Answer 1

我也有同样的问题，并解决了。也许您看不到内容更改，因为您在 app.component.html 中没有 router-outlet 标记。url会改变内容

<router-outlet></router-outlet>

所以你应该将 router-outlet 标签放置在 app.component.html 中。

Answer 2

呵呵。也许student/registration，与默认pathMatch: 'prefix'设置相结合，使 Angular 路由器将您的解释navigateByUrl为相同的路径导航。只是一个假设。

要测试这一点，请将其添加pathMatch: full到第二条路由：

{
    path: 'student/:token',
    component: GuidelinesComponent,
    pathMatch: 'full',
}