如何將禁用屬性系結到我的按鈕組件？
我試圖將禁用添加到 HTML 檔案中，它應該將其作為按鈕組件中的輸入（如顏色、字體顏色是文本作為輸入）..但我不清楚如何做到這一點
button.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>
注冊.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>
uj5u.com熱心網友回復：
like按鈕是一個自定義組件
您必須將禁用定義為應用程式按鈕的輸入，才能將其傳遞給真正的按鈕標簽<button>
@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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/452435.html