[英]How to change the background color when I click a <li> in Angular?
我有一种侧边栏菜单。 像这样:
Projects:
All
project1
project2
当我单击一个项目时,我想将其更改为背景颜色。 (从黑色到绿色)。
Projects:
All
project1 // This was clicked and I want to be GREEN
project2
但是,到目前为止,我所做的是在单击项目时更改所有项目的颜色。 都是绿色知道的。 我不知道如何为特定项目做到这一点。
<div class="container">
<h5>Projects: </h5>
<div class="container-fluid">
<ul class="nav navbar-nav side-nav">
<li routerLinkActive="active" class="nav-item">
<a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
</li>
</ul>
<ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
<li routerLinkActive="active" class="nav-item" >
<a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
</li>
</ul>
</div>
</div>
在组件中:
isActiveProject: boolean;
activeProject() {
this.isActiveProject = true;
}
我想这个活动项目方法适用于所有 li 元素,当它被设置为 true 时仍然处于活动状态。
您需要存储活动项目的索引并将其与 ngFor 循环中的项目进行比较:
成分:
public activeProjectIndex: number;
public activeProject(index: number): void {
this.activeProjectIndex = index;
}
HTML:
<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>
我看到你有一个routerLinkActive="active"
,这应该在li
元素上设置active
类。 然后在您的 CSS 中,您可以执行以下操作:
li.nav-item.active { background: green; }
您可能需要设置[routerLinkActiveOptions]="{exact: true}"
以进行精确路由和突出显示。
然后你可以摆脱isActiveProject
来改变背景颜色和ngStyle
。
您可以通过在点击函数中添加“$event”属性来跟踪点击的项目属性($event.target 或任何您需要的): <a (click)="activeProject($event)"
您还可以访问routerLinkActive
装饰器,因此您还可以通过其父类挂钩当前菜单项
请试试这个,这将最初为“全部”设置绿色背景,并在您单击它时更改选项卡的背景
HTML
<div class="container">
<h5>Projects: </h5>
<div class="container-fluid">
<ul class="nav navbar-nav side-nav">
<li routerLinkActive="active" class="nav-item">
<a (click)="activeProject = 'all'" [ngStyle]="{'background-color':activeProject == 'all' ? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
</li>
</ul>
<ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
<li routerLinkActive="active" class="nav-item" >
<a (click)="activeProject = project.projectId" [ngStyle]="{'background-color':activeProject == project.projectId? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
</li>
</ul>
成分
activeProject='all'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.