Angular 4 routerLink加载错误的组件

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}
  ]}
];

我从患者组件中的单击导航到changepass，如下所示：

<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

您的孩子路线错误。 它们应该相对于其父路径。 即使这样，命名路由器出口也不能与非空路径一起使用。 看来您的问题与此有关。

我在这里准备了一个工作示例

我希望这将有所帮助。