如何解决单击组件时,将组件本身作为参数传递
组件是通过 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)
}
,
模板参考变量
<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
}
不重要
我一开始尝试过,但得到一个空对象,猜猜项目还没有构建......
我会留在这里供以后参考和问同样问题的人。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。