自定义 HTML 元素：on-accept 属性

Question

我在 Angular.

中使用自定义 HTML 元素时遇到了一些问题

像这样添加自定义 html 元素时：

<custom-element *ngIf="something == false" 
    application-name="CUSTOM_NAME" 
    another-attribute="SOME_LINK">
</custom-element>

我可以看到 DOM 中的元素很好，它有 2 个属性：

application-name 和 another-attribute

但是，如果我添加另一个名为 on-accept 的属性，我假设第三个属性变成了一个事件，因为我无法在 DOM.[=25 中看到所有 3 个属性=]

<custom-element *ngIf="something == false" 
    application-name="CUSTOM_NAME" 
    another-attribute="SOME_LINK" 
    on-accept="SOME_EVENT">
</custom-element>

在执行 ng-serve 时，它给了我这个错误：

ERROR in src/app/components/main/main.component.html:5:118 - error TS2339: Property 'SOME_EVENT'
does not exist on type 'MainComponent'.

5 <custom-element *ngIf="something == false" application-name="CUSTOM_NAME" policy-link="SOME_LINK" 
on-accept="SOME_EVENT" ></custom-element>

当我将 on-accept 重命名为 onAccept 时，它工作得很好。

注意：我想将我的自定义 HTML 元素与 Angular 完全分离，因为我也想在其他应用程序中使用它。我想使用一个名为 on-accept 的属性，但显然我不能在我的自定义元素上使用自定义属性 on-accept，当在 Angular 应用程序中时... 这使得它不可重用。

如果我在一些普通的 HTML 文件中使用我的自定义元素，我会得到预期的行为，它会显示一个具有 3 个自定义属性的元素：

application-name、another-attribute 和 on-accept

为什么我不能在我的 Angular 应用程序中使用名为 on-accept 的属性？

Answer 1

在 angular 模板中：on-xy="..." 就像 (xy)="..." ，所以 on-accept="yourMethod()" 就像 (accept)= "yourMethod()"

您的 "SOME_EVENT" 应该是组件中的现有函数。试试这个：

主要组件：

onAcceptEvent(evt) { console.info(evt); }

模板：

<custom-element *ngIf="something == false" on-accept="onAcceptEvent($event)" ></custom-element>

自定义 HTML 元素：on-accept 属性

Custom HTML Element: on-accept attribute

html

custom-element

angular