Angular 路由器导航更改 url，但不呈现组件

Question

我正在开发一个带有路由和路径参数的 Angular 应用程序。通过单击按钮，调用函数将用户重定向到具有相同路径参数的新 URL。尽管浏览器中的 URL 发生了变化，但并未加载 app-routing.module.ts 中定义的相应组件。如果我再次刷新页面，则会呈现正确的页面。
这个想法是让学生获得一个带有哈希标记的唯一 URL(例如 /student/33192c29aa8e449e94f3a1c4eef43ca8)，这向他展示了一些指导方针。然后点击他应该被转发到具有相同 token 的注册页面(例如 /student/registration/33192c29aa8e449e94f3a1c4eef43ca8 )
app-routing.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 中没有路由器导出标记。
url会改变内容

<router-outlet></router-outlet>

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