如何使用 Angular 扩展 HTML 元素 7

Question

我尝试在 Angular 7 中创建自定义按钮。此按钮应支持所有属性，这些属性已经具有标准 HTML 按钮，例如自动对焦、禁用等。所以我尝试扩展 HTMLButtonElement 在我的组件中是这样的：

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

@Component({
  selector: 'my-button',
  template: '<ng-content></ng-content>'
})
export class ButtonComponent extends HTMLButtonElement {
}

但我收到错误消息 Error: Failed to construct 'HTMLButtonElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

是否可以在不使用指令的情况下扩展 Angular 组件中的 HTML 元素？

Demo

Answer 1

Angular 组件无法扩展原生元素。 Angular 存储库中有一个关于此主题的 open issue。今天，您需要让 Angular 组件包装原生 HTML 元素，即您需要在组件模板中添加原生元素。

如何使用 Angular 扩展 HTML 元素 7

How to extend HTML elements with Angular 7

html

angular

custom-controls

web-component