Angular子组件通过@Output传值控制父组件按钮禁用状态

你的核心问题是未在父组件中正确监听子组件的输出事件并更新按钮禁用状态，以下是完整修正步骤：

1. 修正子组件的EventEmitter使用 #

子组件中this.buttonDisabledEvent.emit(false)是正确写法，无需buttonDisabled = false这类赋值表达式，直接传递布尔值即可。完整子组件代码示例：

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-text-container', // 替换为你的子组件实际选择器
  templateUrl: './text-container.component.html',
  styleUrls: ['./text-container.component.css']
})
export class TextContainerComponent {
  @Output() buttonDisabledEvent = new EventEmitter<boolean>();

  scrolledToBottom() {
    // 保留你已实现的滚动到底部判断逻辑
    const isScrolledToBottom = true; // 替换为你的实际判断结果
    if (isScrolledToBottom) {
      // 传递布尔值：false=按钮启用，true=按钮禁用
      this.buttonDisabledEvent.emit(false);
    } else {
      // 可选：未滚动到底部时禁用按钮
      this.buttonDisabledEvent.emit(true);
    }
  }
}

2. 父组件接收事件并更新状态 #

父组件TS代码 #

在父组件类中定义控制按钮禁用状态的变量，并添加事件处理方法：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  // 初始化按钮状态（根据业务需求调整初始值）
  buttonDisabled = true;

  // 接收子组件传递的布尔值并更新状态
  onButtonDisabledChange(isDisabled: boolean) {
    this.buttonDisabled = isDisabled;
  }
}

父组件HTML代码 #

在模板中引入子组件并监听其输出事件，同时绑定按钮的disabled属性：

<!-- 引入子组件，监听buttonDisabledEvent事件并调用父组件处理方法 -->
<app-text-container (buttonDisabledEvent)="onButtonDisabledChange($event)"></app-text-container>

<button
  type="button"
  class="lobyco-btn lobyco-btn-primary"
  [disabled]="buttonDisabled"
>
  Accept
</button>

关键说明 #

• $event是Angular模板中接收子组件EventEmitter传递值的固定变量，会携带子组件emit的布尔值。
• 确保子组件选择器（如app-text-container）与实际定义一致，否则父组件无法识别子组件。
• 可根据业务需求调整buttonDisabled的初始值，比如默认禁用，滚动到底部后启用。

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