同一页面上有两个详细视图？

Question

我有一个组件，它有一个 ngFor 指令循环遍历一组用户，另一个 ngFor 指令循环遍历用户正在发布的所有帖子。我在此元素中有一个视图链接，呈现我的两个 ngFor 循环，我希望能够单击此视图链接并查看用户和相关帖子的详细视图。但是我不确定这是否可能。现在查看链接有效，它带我到页面并显示用户和列表项，问题是当您单击列表中的下一个项目以查看它的详细信息时，用户错误或有问题的帖子是错误的。在我的路由中，我有一条路由转到我想显示以 :/.. 结尾的详细视图的页面，在列出用户及其帖子的组件中，我有一个看起来像这样的视图链接。

<a mat-button routerLinkActive [routerLink]="['/city-care/view-request/', request.id]">View</a>. 

是否可以在用户单击此链接时获得与其相关联的请求的详细视图以及正确的用户？现在我正在按请求导航，并且路线的快照仅适用于请求。我将如何完成这项任务？任何建议将不胜感激。

我的列表组件

    <mat-accordion multi="true" *ngIf ="!isLoading && userIsAuthenticated">

  <h3>All User Requests</h3>

  <mat-expansion-panel class='panel' *ngFor="let user of users">
    <mat-expansion-panel-header *ngIf="user.requests.length > 0"> 
      <mat-panel-title>
        <p>Name:&nbsp; {{ user.first_name }}&nbsp;{{ user.last_name }}</p>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <mat-panel-description  *ngFor="let request of user.requests">
      <p class='left-align'>Request: &nbsp;{{ request.name }} <br>
      {{request.details}}</p>
      <div class="col sm6 right-align">
        <a mat-button routerLinkActive [routerLink]="['/city-care/view-request/', request.id, 

    user.id]">View</a>
          </div>
        </mat-panel-description>
      </mat-expansion-panel>
    </mat-accordion>

我的详细视图组件。

 <div *ngIf="request && user && !isLoading && userIsAuthenticated">
      <div class="card">
        Contact Person: {{user.first_name}} {{user.last_name}} <br>
      Email: &nbsp; {{ user.email }} <br>
      Phone: &nbsp; {{ user.phone }} <br>
      Mobile: &nbsp; {{ user.mobile_phone }} <br>
      <hr>
      Need: &nbsp; {{ request.name }} <br>
      Details: &nbsp; {{ request.details }}<br>
      Date Needed: &nbsp; {{ request.needByDate | date }} <br>
      </div>
    </div>
    <div class="col sm6 right-align">
      <button class="waves-effect waves-light btn back" routerLink="/city-care/site- 
      postings">Back</button>&nbsp;

    
    </div>

这是我的路线

{ path: 'city-care/view-request/:id', component: ViewRequestComponent, canActivate: [ AuthGuard 
 ] },

在详细视图组件ts文件中我调用路由快照查看详细信息，如何在同一页面上同时显示用户详细信息和问题详细信息中的请求的预期结果？

Answer 1

我认为您需要一个服务来获取详细视图组件中请求的用户数据。你能做到吗？

在ViewRequestComponent 中，您可以注入一个了解所有用户的服务。在ngOnInit 函数中，您可以从请求中获取用户。就像角度文档中的示例一样：https://angular.io/guide/router#accessing-query-parameters-and-fragments

ngOnInit() {
  const requestId = this.route.snapshot.paramMap.get('id')
  this.user = this.userService.getUserByRequestId(requestId)
}

Answer 2

最好有如下结构

1. 一个HomeComponent
2. Component 显示用户信息的card
3. Component 显示一般帖子的 card
4. Component 显示帖子的详细信息。

在HomeComponent 中使用*ngFor 呈现所有用户。例如显示10张卡片，每张卡片显示每个用户的firstName、LastName和Avatar（路由：http://localhost:4200 /用户）。通过单击每张用户卡片，我们将导航到另一个组件，该组件使用*ngFor 显示所有用户帖子的列表。例如显示 10 张卡片，每张卡片显示 title 的帖子。 （路线：http://localhost:4200/users/12）。然后通过单击每个帖子，将呈现每个帖子的详细信息组件。 （路由：http://localhost:4200/users/12/13）。

所以你的路线配置将是这样的：

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'users', component: UserComponent },
  { path: 'users/:id', component: PostComponent },
  { path: 'users/:id/:id2', component: PostDetailsComponent }
];