时间戳

首页 > 解决方案 > 自定义 HTML 元素：on-accept 属性

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

问题描述

在 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 中看到所有 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

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

标签： htmlangularcustom-element

解决方案

在角度模板中： 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>

推荐阅读