如何在Angular中根据用户输入从JSON Server的db.json展示单条用户记录？

下面分两种常见场景给出可落地的实现方案，同时附上问题排查要点：

一、路由参数传递（适合页面跳转场景） #

如果你的输入组件和展示组件是两个独立页面，用路由参数是最直接的方式：

1. 确保JSON Server配置正常 #

先确认你的db.json结构符合规范，比如：

{
  "users": [
    { "id": 1, "name": "张三", "email": "zhangsan@example.com" },
    { "id": 2, "name": "李四", "email": "lisi@example.com" }
  ]
}

启动JSON Server：json-server --watch db.json，测试接口http://localhost:3000/users/1能返回对应数据。

2. 配置带参数的路由 #

在app-routing.module.ts中给展示组件添加路由参数：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InputComponent } from './input/input.component';
import { UserDisplayComponent } from './user-display/user-display.component';

const routes: Routes = [
  { path: 'input', component: InputComponent },
  { path: 'user/:userId', component: UserDisplayComponent } // :userId为动态路由参数
];

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

3. 输入组件传递参数并跳转 #

在输入组件中绑定输入框，通过Router跳转到展示页面并携带参数：

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

@Component({
  selector: 'app-input',
  template: `
    <input [(ngModel)]="userId" placeholder="输入用户ID">
    <button (click)="navigateToUser()">查看用户信息</button>
  `
})
export class InputComponent {
  userId: string = '';

  constructor(private router: Router) {}

  navigateToUser() {
    if (this.userId.trim()) {
      this.router.navigate(['/user', this.userId]);
    }
  }
}

注意：需要在app.module.ts中导入FormsModule才能使用[(ngModel)]。

4. 展示组件获取参数并请求数据 #

用ActivatedRoute订阅路由参数变化，然后请求JSON Server数据：

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

@Component({
  selector: 'app-user-display',
  template: `
    <div *ngIf="user" class="user-card">
      <h2>{{user.name}}</h2>
      <p>邮箱：{{user.email}}</p>
    </div>
    <p *ngIf="error" class="error">未找到该用户</p>
  `
})
export class UserDisplayComponent implements OnInit {
  user: any;
  error = false;

  constructor(
    private route: ActivatedRoute,
    private http: HttpClient
  ) {}

  ngOnInit() {
    // 订阅参数变化，支持用户多次输入不同ID的场景
    this.route.paramMap.subscribe(params => {
      const userId = params.get('userId');
      if (userId) {
        this.fetchUser(userId);
      }
    });
  }

  private fetchUser(userId: string) {
    this.http.get(`http://localhost:3000/users/${userId}`)
      .subscribe({
        next: data => {
          this.user = data;
          this.error = false;
        },
        error: () => {
          this.error = true;
          this.user = null;
        }
      });
  }
}

注意：需要在app.module.ts中导入HttpClientModule。

二、服务共享数据（适合同页面组件通信） #

如果输入组件和展示组件在同一页面，用共享服务传递参数更合适：

1. 创建共享服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserShareService {
  private userIdSource = new BehaviorSubject<string | null>(null);
  currentUserId$: Observable<string | null> = this.userIdSource.asObservable();

  setUserId(userId: string) {
    this.userIdSource.next(userId);
  }
}

2. 输入组件调用服务传递参数 #

import { Component } from '@angular/core';
import { UserShareService } from '../user-share.service';

@Component({
  selector: 'app-input',
  template: `
    <input [(ngModel)]="userId" placeholder="输入用户ID">
    <button (click)="triggerFetch()">查看用户信息</button>
  `
})
export class InputComponent {
  userId: string = '';

  constructor(private userShareService: UserShareService) {}

  triggerFetch() {
    if (this.userId.trim()) {
      this.userShareService.setUserId(this.userId);
    }
  }
}

3. 展示组件订阅服务数据并请求 #

import { Component, OnInit } from '@angular/core';
import { UserShareService } from '../user-share.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user-display',
  template: `
    <div *ngIf="user" class="user-card">
      <h2>{{user.name}}</h2>
      <p>邮箱：{{user.email}}</p>
    </div>
    <p *ngIf="error" class="error">未找到该用户</p>
  `
})
export class UserDisplayComponent implements OnInit {
  user: any;
  error = false;

  constructor(
    private userShareService: UserShareService,
    private http: HttpClient
  ) {}

  ngOnInit() {
    this.userShareService.currentUserId$.subscribe(userId => {
      if (userId) {
        this.fetchUser(userId);
      }
    });
  }

  private fetchUser(userId: string) {
    this.http.get(`http://localhost:3000/users/${userId}`)
      .subscribe({
        next: data => {
          this.user = data;
          this.error = false;
        },
        error: () => {
          this.error = true;
          this.user = null;
        }
      });
  }
}

三、常见问题排查 #

• 确认JSON Server的端口和代码中的请求地址一致（默认3000，若修改过需同步）
• 检查路由参数的类型是否和JSON Server中用户ID的类型匹配（比如是数字还是字符串）
• 确保已导入必要模块：FormsModule、HttpClientModule、RouterModule
• 用paramMap替代旧的params获取路由参数，避免类型转换问题
• 检查组件是否在模块中正确声明，服务是否通过依赖注入正常使用

内容的提问来源于stack exchange，提问作者Priyanshu Garg