nuevo en angular
Tengo 3 div, necesito darles a cada uno una identificación una vez que hago clic, también necesito pasar la identificación de divs:
<div (click)="ToBank(e)"></div> <div (click)="ToBank(e)"></div> <div (click)="ToBank(e)"></div> ToBank(e){ ///i need to get which is clicked? }no sé cómo puedo dar nombre a cada div que puedo obtener en mi función, sé que en javascript tenemos getElementByID pero aquí ¿cuál es la mejor manera?
Puede obtener el elemento en el que ha hecho clic usando event.target
En tu caso.
ToBank(e){ let target = e.target; }Hay más detalles sobre eventos aquí: https://developer.mozilla.org/en-US/docs/Web/API/Event/target
En angular, no necesita usar ID, en su lugar puede usar Variables de plantilla .
Estos se crean de la siguiente manera:
<div #divOne (click)="ToBank(e)"></div> <div #divTwo (click)="ToBank(e)"></div> <div #divThree (click)="ToBank(e)"></div>Entonces puedes pasar la variable directamente:
<div #divOne (click)="ToBank(e, divOne)"></div> <div #divTwo (click)="ToBank(e, divTwo)"></div> <div #divThree (click)="ToBank(e, divThree)"></div>Si desea acceder a ellos en su componente directamente, puede usar el decorador ViewChild para hacerlo. Tenga en cuenta que solo estarán disponibles en el enlace del ciclo de vida de AfterViewInit .
Puede pasar el objeto Evento a su método usando la palabra clave $event
<div (click)="ToBank($event)"></div>y luego utilícelo para establecer la identificación del div.
ToBank(event) { event.target.id = 'nyDiv'; } Según tengo entendido, también desea pasar los identificadores al método ToBank() . Puedes hacerlo agregando un segundo parámetro.
ToBank(event, id) { event.target.id = id; }y luego proporcionar los identificadores en los segundos argumentos.
<div (click)="ToBank($event, 'id1')"></div> <div (click)="ToBank($event, 'id2')"></div> <div (click)="ToBank($event, 'id3')"></div>Usando variables de plantilla , puede pasar el elemento DOM sin tener que pasar todo el objeto Evento.
<div #divOne (click)="ToBank(divOne, 'id1')"></div> <div #divTwo (click)="ToBank(divTwo, 'id2')"></div> <div #divThree (click)="ToBank(divThree, 'id3')"></div> ToBank(element, id) { element.id = id; }Otro enfoque es almacenar los identificadores actuales en una propiedad
<div id="{{ ids[0] }}" (click)="ToBank(0, 'id1')"></div> <div id="{{ ids[1] }}" (click)="ToBank(1, 'id2')"></div> <div id="{{ ids[2] }}" (click)="ToBank(2, 'id3')"></div> ids = ['', '', '']; // no ids at first ToBank(arrayIndex, id) { this.ids[arrayIndex] = id; }o hacerlos depender de una cierta propiedad usando el operador ternario .
<div id="{{ conditions[0] ? 'id1' : '' }}" (click)="ToBank(0)"></div> <div id="{{ conditions[1] ? 'id2' : '' }}" (click)="ToBank(1)"></div> <div id="{{ conditions[2] ? 'id3' : '' }}" (click)="ToBank(2)"></div> conditions = [false, false, false]; // no ids at first ToBank(arrayIndex) { this.conditions[arrayIndex] = true; } Tenga en cuenta que normalmente no necesita usar getElementById() y similares en Angular. Establecer la identificación solo tiene sentido si tiene algunos estilos para ella, pero en ese caso, una clase probablemente sea mejor.