Angular中如何将persona.id传递给子路由组件？

1. 配置带参数的子路由 #

在路由配置文件（如app-routing.module.ts）中，为Contact组件添加带id参数的子路由：

const routes: Routes = [
  // 其他路由配置
  {
    path: 'contact',
    component: ContactComponent,
    children: [
      { path: 'contactes/:id', component: ContactesComponent }
    ]
  }
];

2. 修正Contact组件的routerLink指向 #

确保Contact组件模板里的routerLink正确指向子路由并传递persona.id：

<!-- 用户列表循环示例 -->
<div *ngFor="let persona of personas">
  <!-- 相对路径写法（推荐，基于当前父路由） -->
  <a [routerLink]="['contactes', persona.id]">{{ persona.name }}</a>
  <!-- 或绝对路径写法 -->
  <!-- <a [routerLink]="['/contact/contactes', persona.id]">{{ persona.name }}</a> -->
</div>

3. 在Contactes组件中获取ID并查询详情 #

在ContactesComponent中注入ActivatedRoute和FirebaseService，通过路由参数获取ID并请求用户详情：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FirebaseService } from '../firebase.service';

@Component({
  selector: 'app-contactes',
  templateUrl: './contactes.component.html',
  styleUrls: ['./contactes.component.css']
})
export class ContactesComponent implements OnInit {
  personaDetails: any;

  constructor(
    private route: ActivatedRoute,
    private firebaseService: FirebaseService
  ) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      const personaId = params.get('id');
      if (personaId) {
        // 调用服务查询用户详情
        this.firebaseService.getPersonaById(personaId).subscribe(data => {
          this.personaDetails = data;
        });
      }
    });
  }
}

4. 补充FirebaseService的单条查询方法 #

如果你的FirebaseService还没有根据ID查询的方法，添加如下代码：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  private baseUrl = '你的Firebase实时数据库URL';

  constructor(private http: HttpClient) { }

  // 已有的插入、列表查询方法...

  getPersonaById(id: string) {
    return this.http.get(`${this.baseUrl}/personas/${id}.json`);
  }
}

5. 在Contactes模板渲染详情 #

最后在contactes.component.html中展示用户详情：

<div *ngIf="personaDetails">
  <h2>{{ personaDetails.name }} 的详情</h2>
  <p>ID: {{ personaDetails.id }}</p>
  <p>邮箱: {{ personaDetails.email }}</p>
  <!-- 根据你的数据结构渲染其他字段 -->
</div>

内容的提问来源于stack exchange，提问作者Andrea Crinella