已关闭 - RouterLink 无法正常工作以显示用户详细信息 - Angular 8

Question

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

我的想法是我有一个带有 "Users" 选项的菜单，其内容是 table 用户列表。在 table 的 id 列中，我有一个带有用户 ID 的 link，当我单击此 link 时，它应该转到用户的详细信息。 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 { }

用户-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>

用户帐号-detail.component.ts

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

边栏-menu.component.html

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

有人可以帮我吗？

提前致谢。

Answer 1

根据您的路由器配置，您的 UserListComponent 中需要一个 <router-outlet>。在路由的 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 { }

边栏-menu.component.ts

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

已关闭 - RouterLink 无法正常工作以显示用户详细信息 - Angular 8

CLOSED - RouterLink doesn't work properly to show user detail - Angular 8

navigation

routing

routerlink

angular

angular8