无法绑定到“已禁用”；因为它不是“app-button”的已知属性。

Question

如何将禁用属性绑定到我的按钮组件？

我试图将禁用添加到HTML文件中，它应该将其作为按钮组件中的输入（例如颜色，字体颜色是文本被视为输入）..但我不清楚如何做到这一点

按钮。 component.ts

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {

  @Input() text! : string;
  @Input() color! : string;
  @Input() fontColor! : string;

  @Output() btnClick = new EventEmitter;

  constructor() { }

  ngOnInit(): void {
  }

  onClick(){
    this.btnClick.emit();
  }

}

button.component.html

<button [ngStyle]="{'background-color':color,'color':fontColor}" class="btn" (click)="onClick()">
  {{text}}
</button>

registeration.component.html

  <h1>Register Online</h1>

  <form [formGroup]="registerationForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control"
      placeholder="Enter Name" id="name" formControlName="name">
      <span class="text-danger"
      *ngIf="registerationForm.controls['name'].dirty && registerationForm.hasError('required','name')">*Name is a required feild</span>
    </div>
    <div class="form-group">
      <label>Contact Number</label>
      <input type="number" class="form-control"
      placeholder="Enter Contact Number" id="number" formControlName="number">
      <span class="text-danger"
      *ngIf="registerationForm.controls['number'].dirty && registerationForm.hasError('required','number')">*Number is a required feild</span>
    </div>
    <div class="form-group">
      <label>E-mail</label>
      <input type="email" class="form-control"
      placeholder="Enter E-mail" id="email" formControlName="email" >
      <span class="text-danger"
      *ngIf="registerationForm.controls['email'].dirty && registerationForm.hasError('required','email')">*Email is a required feild</span>
    </div>
  </form>

  <div class="container-fluid">
    <app-button color="red" fontColor="white" text="Go Back" (btnClick)="hoverBack()" class="buttons"></app-button>
    <app-button color="green" fontColor="white" text="Register"
    [disabled]="" (btnClick)="register()" class="buttons"></app-button>
  </div>

</div>

Answer 1

Like 按钮是一个自定义组件，

您必须将其定义为禁用作为应用程序按钮的输入，以便能够将其传递给真正的按钮标签

@Input() disabled: boolean;

完整示例将给出

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {

  @Input() text! : string;
  @Input() color! : string;
  @Input() fontColor! : string;
  @Input() disabled! : boolean;

  @Output() btnClick = new EventEmitter;

  constructor() { }

  ngOnInit(): void {
  }

  onClick(){
    this.btnClick.emit();
  }

button.component.html

<button [ngStyle]="{'background-color':color,'color':fontColor}" class="btn" (click)="onClick()" [disabled]="disabled">
  {{text}}
</button>