Angular父子组件传值问题：无法获取父组件ID到子组件

核心问题 #

你的代码存在两个关键问题导致传值失败：

1. 变量拼写错误 #

父组件setId方法里的变量名大小写不匹配：

this.id = idHtml.toString(); // 参数是idHTML，这里写成了idHtml

应修正为：

this.id = idHTML.toString();

这个错误直接导致this.id无法被正确赋值。

2. 组件关系理解偏差 #

你使用this.router.navigate(['/child'])做路由跳转，此时父组件和子组件是路由切换关系，并非嵌套的父子组件。而@Input仅适用于「父组件模板中直接嵌套子组件标签」的场景，路由跳转后父组件会被移出当前视图，子组件是路由独立加载的，两者没有直接嵌套关联，所以@Input完全无法传递值。

解决方案 #

根据你的交互需求选择对应方案：

方案一：路由传参（适合页面跳转场景） #

1. 修改父组件跳转逻辑

把id作为路由参数传递：

setId(idHTML: number) {
  console.log(idHTML);
  // 将id作为路由参数传入
  this.router.navigate(['/child', idHTML.toString()]);
}

2. 配置路由参数

在app-routing.module.ts中给子组件路由添加参数占位符：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChildComponent } from './path/to/child/child.component';

const routes: Routes = [
  // ...其他路由配置
  { path: 'child/:id', component: ChildComponent } // :id是参数占位符
];

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

3. 子组件获取路由参数

使用ActivatedRoute读取路由中的id：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  getId: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 获取路由参数
    this.getId = this.route.snapshot.paramMap.get('id');
    // 转换为数字（如果需要）
    const idNumber = this.getId ? parseInt(this.getId, 10) : null;
    console.log('字符串id:', this.getId, '数字id:', idNumber);
  }
}

方案二：嵌套组件传值（适合子组件在父组件内显示的场景） #

1. 修正父组件拼写错误

setId(idHTML: number) {
  console.log(idHTML);
  this.id = idHTML.toString();
  // 移除路由跳转代码，不需要切换页面
}

2. 保持组件嵌套关系

确保父组件模板中的<app-child>在当前视图内，路由不会切换走父组件。此时@Input会正常接收父组件的id值，子组件现有代码无需修改，ngOnInit中就能打印出正确的getId。

总结 #

• 不需要经过app.component.ts中转传值
• @Input逻辑本身没问题，但仅适用于组件嵌套场景；路由跳转场景需用路由传参
• 先修正拼写错误，再根据页面交互需求选择对应方案

内容的提问来源于stack exchange，提问作者Beginner Coder