自定义角度组件上的Nativescript（点击）事件

我正在尝试在nativescript中的自定义角度组件上绑定（点击）事件

我创建了一个名为“ns custom”的自定义组件，并尝试将（tap）事件绑定到它。但它不起作用

在自定义组件中，我正在执行以下操作：

<StackLayout>
    <Label text="Title"></Label>
    <Label text="some text"></Label>
</StackLayout>

<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

在父元素中，我正在这样做：

<StackLayout>
    <Label text="Title"></Label>
    <Label text="some text"></Label>
</StackLayout>

<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

我希望在点击自定义组件时触发（点击）事件，但它没有。我用纯Angular构建了相同的结构，如果将（click）事件放入自定义组件，则会触发该事件

我试图从自定义组件中传播（tap）事件，如下所示，但它触发了两次（正如预期的那样，因为如果我不使用

event.stopPropagation（）

，tap事件将传播到父组件）：

然后捕获父组件上的事件：

但现在tap事件触发两次。我可以通过将EventEmitter名称更改为除“tap”之外的其他名称来解决此问题（例如，

@Output（）childTapped=new EventEmitter（）；

和

），或者在点击时传递

$event

对象，然后使用

event.stopPropagation（）

，但这一点也不优雅

---

你知道如何优雅地解决这个简单的问题吗？

这基本上是由@mick morely在评论中回答的，但我想我会写一个更具描述性的例子，以及为什么我认为这是一种有用的方法

您基本上需要为自定义组件创建自定义事件。虽然不能重复使用

tap

事件似乎很乏味，但它实际上可以提高代码质量，使其更具描述性

因此，如果我有一个自定义的

HoleComponent

来描述一个“孔”，它可以如下所示：

孔模板 然后，该

孔

组件可由父级使用，如下所示：

父模板

---

将事件显式命名实际上有助于提高代码的可读性。它还迫使开发人员更多地考虑他们正在使用的领域，如果使用DDD是您的事情，这有助于遵守普遍存在的语言。

与Angular Web不同，自定义组件上的属性/事件绑定不会自动映射到其根元素。必须使用输入/输出装饰符来公开属性/事件。如果您的事件被触发两次，那么请共享一个游乐场示例，在该示例中可以复制此问题。我无法在游乐场中复制此问题。我正在使用tns v5.4，无法升级ATM。如果子组件和父组件都有

（tap）

绑定，它会发出两次tap。解决这个问题的方法是在自定义子组件上绑定

（点击）

，然后发出一个带有@Output decorator的事件，该@Output decorator名为

点击

（比如

点击

）因此，事件传播具有以下逻辑：自定义组件侦听

tap

，然后向其父组件发出不同的事件

tap

，该事件侦听

tap

事件。这样，只有自定义组件的

tap

事件由angular拾取，并且只有在这种情况下可以设置Git repo时才会触发。您是否得到了任何修复或修正？您只能通过从子组件到父组件“冒泡”tap事件来解决此问题，如下所示：在子组件中，设置

@Output（）tap\uuu=new EventEmitter（），以及一个函数
emitTap（）{this.tap_u.emit（）；}
。在html中，将此函数绑定到元素上的tap事件：
（tap）=“emitTap（）
。然后，在父元素中，在
tap
事件：
（tap）=“doSomethingByParent（）”
）上设置事件侦听器，并在父元素的
doSomethingByParent（）{/…}中编写所需的代码
。如果需要，您可以在这些事件之间传递angular的
$event
。
<ns-custom (tap)="onCustomComponentClick()"></ns-custom>

    onCustomComponentClick() {
        console.log('custom-component was tapped');
    }

<GridLayout rows="*" columns="*" (tap)="emitTap()">
    <Label row="0" text="A very deep hole"></Label>
</GridLayout>

@Output() holeTap = new EventEmitter();

emitTap() {
    this.holeTap.emit();
}

<Hole (holeTap)="onHoleTap()"></Hole>