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>