继承现有html元素angular

时间:2019-05-03 16:03:46

标签: angular

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

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

反正我能做到吗?

谢谢!

1 个答案:

答案 0 :(得分: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