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

【问题标题】：When clicked on a Component, pass the Component itself as a parameter单击组件时，将组件本身作为参数传递
【发布时间】：2021-09-01 01:24:57
【问题描述】：

组件是通过ngFor 生成的。同一个 click 事件处理程序绑定到所有这些。我想捕获用户在事件处理程序中单击的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.
}

我已经尝试过的

最终在捕获组件后，我想将它的 [selected] Input 设置为 true 并清除最后选择的组件，如果我只能获取组件并将其存储在局部变量中，这应该不难.

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

模板参考变量

<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
}

不重要

我一开始尝试了这个，但是得到了一个空对象，猜想项目还没有建成......

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

【讨论】：

【解决方案3】：

不妨试试：

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

【讨论】：