Question

这是我的app-routing.module.ts：

const appRoutes: Routes = [
  {path: '', component: MainComponent, children:[
    {path: '', component: AppComponent, children:[
      {path: 'home', component: HomeComponent},
      {path: 'register', component: RegisterComponent},
      {path: 'login', component: LoginComponent},
    ]},
    {path: 'patient', component: PatientComponent, children: [
        { path: 'patient/profile', component: PatientProfileComponent, outlet: 'patient-outl'},
        { path: 'patient/changepass', component: ChangePasswordComponent, outlet: 'patient-outl'}
        ],
        canActivate: [RoleGuard],
        data: { roles: ['PATIENT'] }
    },
    {path: 'admin', component: AdminComponent, canActivate: [RoleGuard], data: { roles: ['ADMIN'] }},
    {path: 'dentist', component: DentistComponent, canActivate: [RoleGuard], data: { roles: ['DENTIST'] }},
    {path: '**', component: HomeComponent}
  ]}
];

我从患者组件中的点击导航到如下更改通道：

<a routerLink="/patient/changepass" routerLinkActive="active">Change Password</a>

但实际打开的是HomeComponent而不是ChangePasswordComponent。网址是正确的 - / patient / changepass，但加载的组件是错误的..任何想法为什么会这样？

编辑：

我也试着像这样导航：

<a (click)="editProfile()">Edit Profile</a>

和

   editProfile(){
     this.router.navigate(['/patient/profile']);
   }

但结果相同 - 导航到主页组件..

Answer 1

您的孩子路线错了。它们应该与其父路线相关。即便如此，指定的路由器插座也不适用于非空路径。您的问题似乎与this one有关。

我准备好了example here

我希望这会有所帮助。

Angular 4 routerLink加载错误的组件

1 个答案: