Solución:
La solución más fácil a su problema es asignar una identificación única a cada elemento incluido junto con el empleo de otra variable para mantener la identificación seleccionada. La lógica para encender my-class La clase CSS ahora se basará en la ID seleccionada.
Tu nueva plantilla HTML:
<div (click)="toggleHighlight(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
> I'm a div that gets styled on click
</div>
Tu toggleHighlight función:
highlightedDiv: number;
toggleHighlight(newValue: number) {
if (this.highlightedDiv === newValue) {
this.highlightedDiv = 0;
}
else {
this.highlightedDiv = newValue;
}
}
Plnk de trabajo: https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview
Tengo una solución difícil para este problema:
<div (click)="onclick($event);" >
> I'm a div that gets styled on click
</div>
aplicación:
class App {
constructor() {
}
onclick(event){
var l = event.target.parentElement.getElementsByClassName("my-class");
var count = l.length;
for(var i=0;i<count;i++){
l[i].className = "";
}
event.target.className = "my-class";
}
}
Plink: https://plnkr.co/edit/RHqL56GrTiV9olYE1Ars?p=preview
Una solución que me funcionó al mostrar el menú activo es usar el nombre de la variable mecanografiada en la clase como en
`class="{{ text1Class }}"`
y asigne el nombre de la clase en mecanografiado.
`this.text1Class = "active";`
o
`this.text1Class = "inactive";`
Necesitas tener una clase de estilo diferente como esta
`.inactive {
background-color : gray;
padding : 10px;
}
.active {
background-color : green;
padding : 10px;
}`
Asignar el nombre de la clase dentro de la función
`textOneClicked() : void {
this.text1Class = "active"; // set the active class
this.text2Class = this.text3Class = this.text4Class = "inactive"; // reset other classes
} `
Un Plunker que trabaja aquí