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

Question

我无法理解如何使用

@Output

和

EventEmitter

将布尔值从子组件传递到父元素中的按钮以禁用或启用它。

更具体地说，我希望当带有文本的容器在底部滚动（即子组件）时，将变量的布尔值传递给父组件，我可以将其与

[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 : boolean = true;

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

然后配置父级 HTML 组件

例如：

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