时间戳

首页 > 解决方案 > 继承现有 html 元素的新组件

angular - 继承现有 html 元素的新组件

问题描述

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

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

无论如何我可以做到这一点吗？

提前致谢！

标签： angular

解决方案

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

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

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

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

请参阅此 stackblitz以获取演示。

推荐阅读