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

Question

组件是通过 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 元素，我想要整个组件并访问它是 public变量和方法

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

Answer 1

也许试试：

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

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

不重要

我一开始试过这个，但是得到一个空对象，估计项目还没有建立...

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

Answer 3

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

<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