Question

我正在研究带有路由和路径参数的角度应用程序。单击按钮，将调用一个函数以将用户重定向到具有相同path参数的新URL。尽管浏览器中的URL发生了更改，但未加载app-routing.module.ts中定义的相应组件。如果我再次刷新页面，则会显示正确的页面。

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

app-routing.module.ts

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

guidelines.component.html

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

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

谢谢您的帮助！

Answer 1

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

要进行测试，请将pathMatch: full添加到第二条路线：

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

Answer 2

我遇到了同样的问题，并弄清楚了。也许您看不到内容更改，因为在app.component.html中没有router-outlet标记。网址将更改

的内容

<router-outlet></router-outlet>

因此您应该将router-outlet标记放置在app.component.html中。

角路由器导航更改URL，但不呈现组件

2 个答案: