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

Question

我在Angular里面使用自定义HTML元素的时候遇到了一点小麻烦。

当添加自定义html元素时，像这样。

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

我可以在DOM中看到这个元素，而且它有两个属性：

application-name 和 another-attribute

但是，如果我添加另一个属性，叫做 on-accept我想，第三个属性是变成了一个事件，因为我在DOM中看不到所有的三个属性。

<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应用程序中使用？

Answer 1

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

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

MainComponent:

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

Template:

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