继承现有html元素angular

Question

我想创建具有自定义样式和功能的自定义按钮组件。但是我想继承按钮元素的属性，属性，比如禁用。

这样我就可以直接从父级使用它们，而不是使用Input变量并为每个变量分配它们。

反正我能做到吗？

谢谢！

Answer 1

扩充标准HTML元素的一种方法是为自定义组件提供属性选择器。例如，以下组件具有属性选择器button[custom-button]：

@Component({
  selector: 'button[custom-button]',
  template: '<ng-content></ng-content>',
  styleUrls: ['./custom-button.component.css']
})
export class CustomButtonComponent {
  ...
}

然后可以在HTML按钮上设置属性custom-button，该按钮将成为组件的宿主元素：

<button custom-button disabled (click)="onClick()">I am disabled</button>

有关演示，请参见this stackblitz。