javascript - 创建具有禁用属性的自定义 Angular 按钮组件

Question

我想知道如何创建一个基于 native HTML 按钮元素并包含其自己的 disabled 属性的自定义 Angular 组件。

我们目前有自己的 button 元素实现，该元素不包含 disabled 属性，我想知道如何添加此功能并确保它仍然无法使用且不可点击。

谢谢

Answer 1

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-button',
  template: `<button [disabled]="disabledValue">button</button>`
})
export class MyButtonComponent  {
@Input()
public disabledValue: boolean;
}
//usage: <my-button [disabledValue]="true"><my-button/>