typescript - Angular 从子组件传值以在父组件中禁用按钮

我在理解如何使用 @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>

我希望我需要的东西已经足够清楚，如果有任何不清楚的地方先道歉——我很快会回来查看并在必要时更新——非常感谢你的帮助！

答案＃1

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

然后你必须像这样在 父组件 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;
  }
}

答案＃2

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

例如：在 parent.component.ts 中

button : boolean = true;

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

然后配置父级 HTML 组件

例如：

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