Angular中Checkbox控制Button1启用与禁用的功能实现求助

1. 修改按钮禁用服务 (button-disable.service.ts) #

调整服务，单独维护button1的禁用状态：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ButtonDisableService {
  // 控制button1的禁用状态，初始设为禁用
  private button1DisabledSubject = new BehaviorSubject<boolean>(true);
  button1Disabled$ = this.button1DisabledSubject.asObservable();

  // 更新button1的禁用状态
  setButton1Disabled(disabled: boolean): void {
    this.button1DisabledSubject.next(disabled);
  }
}

2. 关联Checkbox与按钮状态（组件模板） #

在组件模板中给Sample1的Checkbox绑定change事件，同时给button1绑定禁用状态：

<!-- Sample1 Checkbox -->
<input type="checkbox" (change)="onSample1CheckboxChange($event.target.checked)" /> Sample1

<!-- Button1 -->
<button [disabled]="button1Disabled">Button 1</button>

3. 实现事件逻辑（组件类） #

注入服务，处理Checkbox的切换事件，并订阅状态更新：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ButtonDisableService } from './services/button-disable.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  button1Disabled = true;
  private subscription!: Subscription;

  constructor(private buttonDisableService: ButtonDisableService) {}

  ngOnInit(): void {
    // 订阅button1的禁用状态变化
    this.subscription = this.buttonDisableService.button1Disabled$.subscribe(
      disabled => this.button1Disabled = disabled
    );
  }

  onSample1CheckboxChange(isChecked: boolean): void {
    // 勾选时启用button1，取消勾选时禁用button1
    this.buttonDisableService.setButton1Disabled(!isChecked);
  }

  ngOnDestroy(): void {
    // 清理订阅避免内存泄漏
    this.subscription.unsubscribe();
  }
}

关键说明 #

• 用BehaviorSubject维护状态，保证组件能实时响应状态变化
• Checkbox切换时，通过服务更新button1的禁用状态：勾选时传入false（启用按钮），取消勾选时传入true（禁用按钮）
• 组件订阅服务的状态流，确保按钮状态与服务同步

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