Как изменить цвет фона, когда я нажимаю <li>в Angular? - PullRequest
Новая
       40

Как изменить цвет фона, когда я нажимаю <li>в Angular?

0 голосов
/ 21 февраля 2020

У меня есть своего рода меню боковой панели. Например: 

 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.

Ответы [ 4 ]

1 голос
/ 25 февраля 2020

Вы можете отслеживать свойства элемента, по которому щелкнули ($ event.target или все, что вам нужно), добавив свойство "$ event" в вашу функцию щелчка: <a (click)="activeProject($event)"

У вас также есть доступ к routerLinkActive декоратор, так что вы также можете перехватить текущий элемент меню по его родительскому классу

1 голос
/ 21 февраля 2020

Я вижу, у вас есть routerLinkActive="active", это должно установить класс active для элемента li. Затем в вашем CSS вы можете сделать: 

li.nav-item.active { background: green; }

Возможно, вам придется установить [routerLinkActiveOptions]="{exact: true}" для точной маршрутизации и выделения.

Тогда вы можете избавиться от isActiveProject для изменение цвета фона и ngStyle.

1 голос
/ 21 февраля 2020

Вам необходимо сохранить индекс активного проекта и сравнить его с элементом в ngFor l oop:

Компонент: 

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>
0 голосов
/ 25 февраля 2020

Пожалуйста, попробуйте это, это первоначально установит зеленый фон для «Все» и изменит фон вкладки, когда вы нажмете на нее

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'
...