单击组件时，将组件本身作为参数传递

问题描述

组件是通过 ngFor 生成的。相同的点击事件处理程序绑定到所有这些。我想捕获用户在事件处理程序中单击的 Component 作为参数。

模板

<div>
  <app-my-component (click)="pageClicked(<sender>)" *ngFor="let page of pages"></app-my-component>
</div>

背后的代码

pageClicked(sender: MyComponent): void {
  // sender would be the COMPONENT who called this function.
}

我已经尝试过的

• 通过给组件一个名称 #comp 使组件成为模板变量，我得到了一个空对象
• 使用 this 关键字，此上下文中的 this 是父组件，通过 ngFor 生成较小的组件
• 将 $event 作为参数发送并通过 path 查找组件，我不想要 html 元素，我想要整个组件并访问它的公共变量和方法

最终在捕获组件后，我想将它的 [selected] Input 设置为 true 并清除最后选择的组件，如果我只能获取组件并将其存储在一个局部变量。

解决方法

也许试试：

<ng-container *ngFor="let page of pages">
    <app-my-component #component (click)="pageClicked(component)"
    </app-my-component>
</ng-container>

,

如果使用模板引用变量，则传递整个组件，

<app-my-component #component (click)="pageClicked(component)"..>

如果您有 @OputPut，则在发射器时使用它，但将事件重命名为 (click)，请使用例如(onClick)

//your component
@Output()onClick:EventEmitter<MyComponent>=new EventEmitter<MyComponent>()

clickButton(){
   this.onClick.emit(this)
}

看到fool stackbliz

,

模板参考变量

<div>
  <app-my-component #mycomponent (click)="pageClicked(mycomponent)" *ngFor="let page of pages"></app-my-component>
</div>

pageClicked(sender: MyComponent): void {
  // sender.selected is now available
}

不重要

我一开始尝试过，但得到一个空对象，猜猜项目还没有构建......

我会留在这里供以后参考和问同样问题的人。