如何通过 Angular 上的 @Output 知道哪个 child 将事件发送到 parent

Question

在使用 Angular (11) 和 NativeScript 尝试获取事件的“当前本机元素”时，我失去了理智...

我有一个包含多个块（块组件）的容器（home 组件）。每个组件都有一个“onPan”事件管理，这个事件通过@Output 转发让parent 知道。然后，parent(home)监听这个pan事件...

所有这些都有效。但是当 parent 获取事件时，我无法检查 WHICH 元素是否在移动。我的意思是，“PanGestureEventData”带有原生“视图”属性，但我无法从此事件中检索 Angular“nativeElement”。

我试图在 parent 模板侦听器上添加“this”，但我不知道它是哪个 object :x

您是否有任何解决方案来检索 parent，“blocks”QueryList 中的哪个元素当前正在发送事件？

这是一般情况，它可以是任何不携带当前目标的自定义事件，从 child 发送到它的 parent :)

谢谢！

我的片段：

home.component.html

<GridLayout #refGrid columns="*,*,*,*,*,*" rows="*,*,*,*,*,*" width="100%">
  <ns-block #block col="1" row="1" (moveEvent)="onMove(this, $event)"></ns-block>
  <ns-block #block col="2" row="1" (moveEvent)="onMove(this, $event)"></ns-block>
  <ns-block #block col="3" row="1" (moveEvent)="onMove(this, $event)"></ns-block>
  <ns-block #block col="1" row="2" (moveEvent)="onMove(this, $event)"></ns-block>
</GridLayout>

home.component.ts

import {Component, ElementRef, QueryList, ViewChildren} from "@angular/core";
import {PanGestureEventData} from "@nativescript/core";
import {BlockComponent} from "../component/block/block.component";

@Component({
  selector: "Home",
  templateUrl: "./home.component.html"
})
export class HomeComponent {
  @ViewChildren(BlockComponent, { read: ElementRef }) blocks!: QueryList<ElementRef>;

  onMove(element, args: PanGestureEventData): void {
    console.log("move", element);
  }
}

block.component.tns.html

<Image (pan)="onPan($event)"
   src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></Image>

block.component.ts

import {Component, Output, EventEmitter} from '@angular/core';
import {PanGestureEventData} from "@nativescript/core";

@Component({
    selector: 'ns-block',
    templateUrl: './block.component.html',
    styleUrls: ['./block.component.css']
})
export class BlockComponent {

    @Output() moveEvent = new EventEmitter<PanGestureEventData>();

    onPan(args: PanGestureEventData): void {
        this.moveEvent.emit(args);
    }
}

Answer 1

你不能为每个子组件提供不同的模板引用变量并将其发送到事件处理程序吗？

home.component.html

<GridLayout #refGrid columns="*,*,*,*,*,*" rows="*,*,*,*,*,*" width="100%">
  <ns-block #block1 col="1" row="1" (moveEvent)="onMove(block1, $event)"></ns-block>
  <ns-block #block2 col="2" row="1" (moveEvent)="onMove(block2, $event)"></ns-block>
  <ns-block #block3 col="3" row="1" (moveEvent)="onMove(block3, $event)"></ns-block>
  <ns-block #block4 col="1" row="2" (moveEvent)="onMove(block4, $event)"></ns-block>
</GridLayout>

home.component.ts

onMove(element, args: PanGestureEventData): void {
  console.log("move", element);
}

更新：动态生成`<ns-block>`

在使用循环动态生成标记的情况下，它变得更加简单，因为您不必单独命名标签。您可以使用它的模板引用变量将当前元素直接传递给处理程序。

<GridLayout #refGrid columns="*,*,*,*,*,*" rows="*,*,*,*,*,*" width="100%">
  <ns-block *ngFor="let item of someArray" #block col="1" row="1" (moveEvent)="onMove(block, $event)"></ns-block>
</GridLayout>

如何通过 Angular 上的 @Output 知道哪个 child 将事件发送到 parent

How to know which child sending event to parent with @Output on Angular

events

nativescript

angular

更新：动态生成`<ns-block>`

如何通过 Angular 上的 @Output 知道哪个 child 将事件发送到 parent

How to know which child sending event to parent with @Output on Angular

events

nativescript

angular

更新：动态生成<ns-block>

更新：动态生成`<ns-block>`