如何使用Angular 7扩展HTML元素

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

HTMLButtonElement

，如下所示：

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

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

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“我的按钮”，
模板：“”
})
导出类ButtonComponent扩展了HtmlButtoneElement{
}

但我收到错误消息

error:构造“HTMLButtonElement”失败：请使用“new”运算符，此DOM对象构造函数不能作为函数调用。

是否有某种方法可以在不使用指令的情况下扩展Angular组件中的HTML元素

---

角度组件无法扩展本机元素。关于这个话题，有一个关于角度回购的讨论。今天，您需要让Angular组件包装本机HTML元素，也就是说，您需要在组件模板中添加本机元素。

为什么不使用像

模板那样的模板：'

？@Eliseo，请参阅我在回答中链接的问题，以了解为什么要扩展本机元素。简而言之，如果希望使组件的行为与添加到组件模板中的本机元素相同，则需要“代理”所有本机元素的事件。例如，按钮聚焦时会发出

focus

事件。如果希望组件的用户能够绑定到该事件，则需要将其公开为

@输出。如果角度组件可以扩展本机元素，那么本机事件将免费公开。好的，谢谢你的回答。我订阅了这期杂志。