Búsqueda de sitios web

angular - Al hacer clic en un Componente, pasar el Componente mismo como parámetro

Los componentes se generan a través de un ngFor. El mismo manejador de eventos de clic está vinculado a todos ellos. Quiero capturar el Componente en el que el usuario hizo clic dentro del manejador de eventos como un argumento.

Plantilla

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

Código Detrás

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

Lo que ya he intentado

  • Al hacer que el componente sea una variable de plantilla dándole un nombre #comp, obtuve un objeto vacío
  • Usando la palabra clave this, this en este contexto es el componente padre, generando los componentes más pequeños mediante ngFor
  • Enviando $event como un parámetro y encontrando el componente a través del path, no quiero el elemento html, quiero el componente completo y acceso a sus Variables y Métodos públicos

Eventualmente, después de capturar el componente, querré establecer su entrada [selected] en true y borrar el último componente seleccionado, lo cual no debería ser tan difícil si puedo simplemente obtener el componente y almacenarlo en una variable local.

Respuesta #1

Quizás intenta:

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

Respuesta #2

si utilizas una variable de referencia de plantilla, pasas todo el componente,

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

si tienes un @OputPut, úsalo cuando emitas, pero renombra el evento (click), usa por ejemplo (onClick)

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

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

ver a un tonto stackbliz

Artículos relacionados