Angular 如何将父组件点击事件动态切换的状态传递给子组件

• 核心机制：使用Angular内置的@Input()装饰器完成父到子的单向数据流绑定，整个过程无需额外引入状态管理库，框架的变更检测会自动同步动态变化的属性值

1. 子组件侧配置接收逻辑 #

首先在子组件的TypeScript代码中，从@angular/core引入Input装饰器，标记需要接收父组件传值的属性：

import { Component, Input, OnInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child-component',
  template: `
    <!-- 模板内可以直接使用接收到的状态做渲染逻辑 -->
    <div [class.active]="stateStatus">我是子组件，当前接收的状态：{{ stateStatus }}</div>
  `
})
export class ChildComponent implements OnInit {
  // 标记该属性可接收父组件传入的值
  @Input() stateStatus: boolean = false;

  constructor() {}

  ngOnInit(): void {}

  // 可选：如果需要监听状态变更执行自定义逻辑，可实现ngOnChanges钩子
  ngOnChanges(changes: SimpleChanges) {
    if (changes['stateStatus'].currentValue) {
      // 状态变为true时的自定义逻辑，比如拉取数据、更新样式
      console.log('子组件检测到父组件传入的状态已变更');
    }
  }
}

2. 父组件侧完成状态绑定 #

首先优化父组件的状态定义，给stateStatus设置初始值，避免初始为undefined引发的异常：

// 父组件ts内的状态声明替换为带初始值的版本
stateStatus: boolean = false;

然后在父组件的模板中，在放置子组件标签时，通过方括号属性绑定语法把动态状态绑定到子组件的@Input属性上：

<!-- 原有触发状态切换的点击元素 -->
<div (click)="stateStatus = !stateStatus">Click me</div>

<!-- 绑定动态状态到子组件 -->
<app-child-component [stateStatus]="stateStatus"></app-child-component>

关键注意点 #

• 绑定子组件属性时的方括号[]不能省略：这是Angular的属性绑定语法，会实时跟踪父组件stateStatus的变化，自动更新传入子组件的值；如果省略方括号，会把字符串字面量"stateStatus"直接传给子组件，无法实现动态同步
• 状态属性的类型建议使用小写的基础类型boolean，而非大写的包装对象Boolean，避免类型校验的非预期问题，同时给属性设置初始值，避免初始值为undefined引发的渲染异常
• 变更检测由框架自动完成：只要父组件的stateStatus因为点击事件发生了修改，Angular会自动把最新值同步到子组件对应的@Input属性上，不需要开发者手动触发更新
• 子组件如果需要反向通知父组件状态变化，需要额外通过@Output()装饰器搭配自定义事件实现，本场景仅需要父到子的状态传递时无需配置

内容的提问来源于stack exchange，提问作者Denver Dang