Angular 从子组件传递一个值以禁用父组件中的按钮

Question

我无法理解如何使用 @Output 和 EventEmitter 将 boolean 值从子组件传递到父元素中的按钮以禁用或启用它。

更具体地说，我希望当带有文本的容器在底部（子组件）滚动时，将变量的 boolean 值传递给我可以与 [disabled] 属性一起使用的父组件。

滚动计算已经开始工作，我只是在使用 @Output 和 EventEmitter 时遇到了问题。

这是代码：

这是子组件

@Output() buttonDisabledEvent = new EventEmitter<boolean>();

  scrolledToBottom() {
    if (
      // container is scrolled to bottom
    ) {
      this.buttonDisabledEvent.emit(false);
      // or something like this maybe?
      this.buttonDisabledEvent.emit(buttonDisabled = false);
    }
  }

父母 html

<button
  type="button"
  class="lobyco-btn lobyco-btn-primary"
  [disabled]="buttonDisabled" <--- I need the new value to be used here
>
  Accept
</button>

我希望它足够清楚我需要什么，如果有任何不清楚的地方提前道歉 - 我会很快回来检查并在需要时更新 - 非常感谢你的帮助！

Answer 1

在子组件中你说this.buttonDisabledEvent.emit(false);

然后你必须像这样在ParentComponent HTML中捕获事件：

<app-child (buttonDisabledEvent)="onButtonDisabled($event)"></app-child>

<button
  type="button"
  class="lobyco-btn lobyco-btn-primary"
  [disabled]="buttonDisabled" <--- I need the new value to be used here
>
  Accept
</button>

ParentComponent TS将如下所示：

export class ParentComponent {
  buttonDisabled = false;

  onButtonDisabled(buttonDisabled: boolean) {
    this.buttonDisabled = buttonDisabled;
  }
}

Answer 2

您应该通过创建一些方法来配置父组件

例如：在 parent.component.ts 中

button : boolian = true;

buttonDisable(event: boolian) {
this.button = false;
}

然后配置父 HTML 组件

例如：

<button [disable]=buttonDisabledEvent="buttonDisable($event)" >BUTTON</button>