Angular 10：在视图上显示用户信息

Question

我有一个页面，其中列出了我所有的注册用户，我想创建一个操作，在其中单击用户名并打开另一个组件以显示来自此特定用户的信息。我已经创建了另一个名为 user-details 的组件。如何做到这一点的最佳方法？也许从 URL 读取 ID？

这是我的代码：

users.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-manage-users',
  templateUrl: './manage-users.component.html',
  styleUrls: ['./manage-users.component.scss']
})
export class ManageUsersComponent implements OnInit {

  items: Observable<any[]>;
  constructor(firestore: AngularFirestore) {
    this.items = firestore.collection('users').valueChanges();
  }

  ngOnInit(): void {
  }


}

users.component.html

<div class="card card-custom example example-compact gutter-b">    
  <div class="card-body">
    <table class="table table-striped">
        <thead>
        <tr>
          <th scope="col">Actions</th>
          <th scope="col">Sign-up Time</th>
          <th scope="col">Username</th>
          <th scope="col">Email</th>
          <th scope="col">Is Enabled</th>
          <th scope="col">Is Online</th>
          <th scope="col">Last Time Online</th>
          <th scope="col">Age</th>
          <th scope="col">Gender</th>
        </tr>
        </thead>
        <tbody>
          
          <tr *ngFor="let item of items | async">
              <td>
                <div ngbDropdown container="body">
                  <button class="btn" ngbDropdownToggle>Actions</button>
                  <div ngbDropdownMenu>
                    <button ngbDropdownItem>View</button>
                    <button ngbDropdownItem>Block</button>
                    <div class="dropdown-divider"></div>
                    <button ngbDropdownItem>Delete</button>
                  </div>
                </div>
              </td>
    
              <td>{{item.createdDate}}</td>
              <td><a target="_blank" href="/user-details">{{item.name}}</a></td>
              <td>{{item.email}}</td>
              <td>{{item.isEnabled}}</td>
              <td>{{item.online}}</td>
              <td>{{item.last_time_online}}</td>
              <td>{{item.birthday}}</td>
              <td>{{item.gender}}</td>
          </tr>

        </tbody>
      </table>
  </div>
</div>

Answer 1

我会这样做：

• 在服务中缓存您的用户，以便您可以通过 id 从中检索他们：

@Injectable({providedIn: 'root'})
export class UserCacheService {
  getUserById(): User {
    // Naive approach, you of course have to think about asynchronicity and error handling here.
    return this.users[id];
  }
}

• 您使用 id 路由到 details 组件。

这样定义路线：

const routes: Routes = [
  { path: 'users/:id', component: UserDetailComponent },
];

然后当你路由到它时，你可以像这样从 url 中获取 id：

// You can e.g. do this in ngOnInit.
const id = this.activatedRoute.snapshot.paramMap.get('id');
// Think about what happens when someone opens the url while the user is not already cached!
const user = this.userCacheService.getUserById(id);

Answer 2

您可以像这样将用户 ID 作为 URL 参数传递给用户

<a href="/user-details/{{item.id}}" class="btn btn-link">John Mike</a>

并使用 ActivatedRoute

在 user-details 组件中获取 t id 参数

  constructor(
    private readonly route: ActivatedRoute,
 
  ) { }

  ngOnInit() {
    // No Subscription
    this.snapshotParam = this.route.snapshot.paramMap.get("id");

  }

参考下面的例子

Click here