如何在angular 2+版本中创建自定义按钮组件。使用ControlValueAccessor

ng generate component CustomButton

<button mat-button [class.active]="isActive" [disabled]="isDisabled" (click)="onClick()">
  {{ label }}
</button>

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-button',
  templateUrl: './custom-button.component.html',
  styleUrls: ['./custom-button.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomButtonComponent),
      multi: true
    }
  ]
})
export class CustomButtonComponent implements ControlValueAccessor {
  // 组件的属性和状态
  isActive: boolean = false;
  isDisabled: boolean = false;
  label: string = '';

  // ControlValueAccessor接口的方法
  onChange: any = () => {};
  onTouched: any = () => {};

  writeValue(value: any): void {
    // 根据传入的值更新组件的状态
    this.isActive = value;
  }

  registerOnChange(fn: any): void {
    // 注册变化回调函数
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    // 注册触摸回调函数
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    // 设置组件的禁用状态
    this.isDisabled = isDisabled;
  }

  onClick(): void {
    // 处理按钮点击事件
    this.isActive = !this.isActive;
    this.onChange(this.isActive);
    this.onTouched();
  }
}

<app-custom-button [(ngModel)]="buttonValue"></app-custom-button>