J'ai une sorte de menu de barre latérale. Comme ceci: Lorsque je clique sur un élément, je veux le modifier la couleur d'arrière-plan. (de noir au vert). mais, ce que j'ai fait jusqu'à présent, c'était de changer la couleur de tous les projets lorsque j'ai cliqué sur un projet. Tous sont écrits verts. Je ne sais pas comment faire cela pour un article particulier. dans le composant: Je suppose que cette méthode active du projet est applicable pour tous les éléments LI, un reste actif quand il a été marqué sur le vrai.
4 Réponses :
Vous devez stocker l'index du projet actif et le comparer à l'élément de la boucle NGFOR:
Composant: P>
<ul class="nav navbar-nav side-nav" *ngFor="let project of projects; let i = index">
<li routerLinkActive="active" class="nav-item" >
<a (click)="activeProject(i)" [ngStyle]="{'background-color': activeProjectIndex === i ? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
</li>
</ul>
Je vois que vous avez un resslinkactive = "actif" code>, ceci doit définir la classe active code> sur le li code> élément. Ensuite, dans votre CSS, vous pouvez faire: li.nav-item.active { background: green; }
S'il vous plaît essayez ceci, cela définira initialement l'arrière-plan vert pour «tous» et changera l'arrière-plan de l'onglet lorsque vous avez cliqué sur IT
HTML P>
activeProject='all'
Vous pouvez suivre les propriétés de l'élément cliqué ($ Event.Target ou tout ce dont vous avez besoin) en ajoutant la propriété "$ événement" dans votre fonction de clic:
Vous avez également accès à
RouterLinkActive Decorator, vous pouvez également accrocher votre élément de menu actuel par sa classe mère
Au lieu d'une valeur booléenne, stockez le projet actif en tant que chaîne, vous pouvez vérifier pour une égalité individuelle.