已解决-Angular 8-RouterLink无法正常显示用户详细信息

Question

我正在开发一个应用程序，但在显示用户详细信息时遇到问题。我想我已经正确添加了有关路由器的所有步骤，但是由于任何未知原因，它都无法正常工作。

想法是，我有一个菜单，其中的一个选项是“ Users”，其内容是带有用户列表的表。在表格的ID列中，有一个带有用户ID的链接，当我单击此链接时，它应该转到用户的详细信息。 url接受的参数很好（localhost：4200 / users / {id_of_user}），但未加载内容。

这是我的代码：

app.module.ts

const routes: Routes = [
  { path: '', component: SidebarLayoutComponent,
    children: [
      { xxx },
      { path: 'users', component: UserListComponent, canActivate: [AuthGuard],
          children: [
            { path: ':id', component: UserAccountDetailComponent, canActivate: [AuthGuard] }
          ]
      },
    ]
  },
];

@NgModule({
   .
   .
   .
   imports: [
      RouterModule.forRoot(routes)
   ],
})
export class AppModule { }

user-list.component.ts

<table class="user-list" mat-table [dataSource]="userListDataSource">
   .
   .
   .
   <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>id</th>
         <td mat-cell *matCellDef="let user">
            <a [routerLink]="['/users', user.id]">
               {{ user.id }}
            </a>
         </td>
   </ng-container>
</table>

user-account-detail.component.ts

export class UserAccountDetailComponent implements OnInit {
   .
   .
   .
   constructor(
       private route: ActivatedRoute
   ) {
    let userId;
    this.route.paramMap.subscribe((params: Params) => {
      userId = +params.get('id');
    });
   .
   .
   .
}

sidebar-menu.component.html

<ul id="main-menu">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/users">Users</a>
    </li>
</ul>

有人可以帮我吗？

谢谢你。

Answer 1

使用路由器配置，您需要在<router-outlet>中添加一个UserListComponent。在路由的children属性中定义的所有路由都在嵌套的路由器出口内呈现。

所以您的UserListComponent成为：

<table class="user-list" mat-table [dataSource]="userListDataSource">
   .
   .
   .
   <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>id</th>
         <td mat-cell *matCellDef="let user">
            <a [routerLink]="['/users', user.id]">
               {{ user.id }}
            </a>
         </td>
   </ng-container>
</table>

<!-- This is where your UserAccountDetailComponent will render -->
<router-outlet></router-outlet>

您的SideBar组件还需要一个路由器插座：

<ul id="main-menu">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/users">Users</a>
    </li>
</ul>

<router-outlet></router-outlet>

编辑：

或者，如果您只想使用一个router-outlet，则应将路由器配置更改为：

const routes: Routes = [
  { path: '', component: SidebarLayoutComponent,
    children: [
      { xxx },
      { path: 'users', component: UserListComponent, canActivate: [AuthGuard]},
      { path: 'users/:id', component: UserAccountDetailComponent, canActivate: [AuthGuard]},
    ]
  },
];

Answer 2

@@ c_ogoo，@ Eldar我找到了解决方案。非常感谢您的关注和帮助。

解决方案如下：

app.module.ts

const routes: Routes = [
  { path: '', component: SidebarLayoutComponent,
    children: [
      { xxx },
      { path: 'merchants/:id', component: MerchantAccountDetailComponent, canActivate: [AuthGuard] },
      { path: 'merchants', component: MerchantListComponent, canActivate: [AuthGuard] },
    ]
  },
];

@NgModule({
   .
   .
   .
   imports: [
      RouterModule.forRoot(routes)
   ],
})
export class AppModule { }

sidebar-menu.component.ts

<ul id="main-menu">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/users">Users</a>
    </li>
</ul>