如何在Angular 7中显示模式中单列的详细信息？

ng generate component user-list
ng generate component user-detail

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: 'users', component: UserListComponent },
  { path: 'user/:id', component: UserDetailComponent },
  { path: '', redirectTo: '/users', pathMatch: 'full' }
];

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-list',
  template: `
    <h2>User List</h2>
    <ul>
      <li *ngFor="let user of users" (click)="onSelect(user)">
        {{ user.name }}
      </li>
    </ul>
  `
})
export class UserListComponent {
  users = [
    { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' }
  ];

  onSelect(user) {
    this.router.navigate(['/user', user.id]);
  }
}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  template: `
    <h2>{{ user?.name }}</h2>
    <p>Email: {{ user?.email }}</p>
  `
})
export class UserDetailComponent implements OnInit {
  user;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const userId = +params.get('id');
      // 这里可以通过服务获取用户详细信息
      this.user = { id: userId, name: 'John Doe', email: 'john.doe@example.com' };
    });
  }
}