Si hallas algún error en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes aplicar el código al proyecto final.
Solución:
Si desea poder agregar esto a cualquier elemento sin tener que copiar/pegar el mismo código una y otra vez, puede crear una directiva para hacerlo. Es tan simple como a continuación:
import Directive, HostListener from "@angular/core";
@Directive(
selector: "[click-stop-propagation]"
)
export class ClickStopPropagation
@HostListener("click", ["$event"])
public onClick(event: any): void
event.stopPropagation();
Luego simplemente agréguelo al elemento en el que lo desea:
Stop Propagation
El más simple es llamar a detener la propagación en un controlador de eventos. $event funciona igual en Angular 2 y contiene el evento en curso (mediante un clic del mouse, un evento del mouse, etc.):
(click)="onEvent($event)"
en el controlador de eventos, podemos detener la propagación:
onEvent(event)
event.stopPropagation();
Vocación stopPropagation en el evento impide la propagación:
(event)="doSomething($event); $event.stopPropagation()"
Para preventDefault solo regresa false
(event)="doSomething($event); false"
El enlace de eventos permite ejecutar múltiples sentencias y expresiones para ser ejecutadas secuencialmente (separadas por ; como en *.ts archivos
El resultado de la última expresión causará preventDefault ser llamado si es falso. Así que tenga cuidado con lo que devuelve la expresión (incluso cuando solo hay una)
Te mostramos las comentarios y valoraciones de los lectores
Puedes añadir valor a nuestro contenido informacional participando con tu experiencia en las críticas.