Próbuję dokonywać wpływu na Hover na Div z dyrektywą NgClass Kątową. W pliku szablonu mam element DIV z klasą "List-Item-Container", który zawiera div z klasą "List-Element", który jest iterowany za pomocą A * NGFOR Dyrektywa. W elemencie DIV "List-Item" mam trzy Divs z klasą "List-Item-Item-kolumna", które są umieszczone poziomo jak wiersz tabeli z wyświetlaczem inline. W div z klasą "List-Item" umieściłem słuchaczy zdarzeń myszy i mouselen wywołujących, które wywołuje Hoverlistitem () w moich. Funkcja Wartość, która następnie zmienia się w tle do innego koloru.

Problem, z którymi stoję, jest to, że po unoszącym się wskaźniku myszy na "List-Item" Div All Moje "List-Item" Divs jest dotkniętych, zamiast tego, który unosiłam się. Jak rozwiązać ten problem?

Plik .html

<div class="list-item-container">
      <ng-container *ngFor="let opportunity of dealService.opportunities">
        <div [ngClass]="{'list-item-highlight': listItemHovered}" class="list-item" (mouseenter)="hoverListItem()"
             (mouseleave)="hoverListItem()"
             (click)="selectOpportunity(opportunity)">
          <div
            class="list-item-column">{{opportunity.account?.name === null ? "N/A" : opportunity.account.name}}</div>
          <div class="list-item-column">{{opportunity.requirementTitle}}</div>
          <div class="list-item-column">{{opportunity.salesValue | number: '1.0-2'}}</div>
        </div>
      </ng-container>
    </div>

Plik .css.

.list-item-container{
  overflow: auto;
  width: 100%;
  max-height: 500px;
}
.list-item{
  font-size: 15px;
  border-radius: 10px ;
  margin-top: 5px;
  height: 50px;
  background: lightgray;
  color: black;
}

.list-item-highlight{
  background: #7e00cc;
  color: white;
}

.list-item-column{
  height: inherit;
  vertical-align: center;
  display: inline-block;
  width: 33.33%;
  padding-left: 40px;
}

Plik .ts

 hoverListItem() {
    this.listItemHovered = !this.listItemHovered;
  }
4
javaland235 21 luty 2019, 21:42

2 odpowiedzi

Najlepsza odpowiedź

W tej chwili tworzysz i modyfikujesz listItemHovered Flaga wewnątrz kontekstu komponentu, należy zachować flagę dla każdego poziomu przedmiotu, co może pomóc łatwo zidentyfikować komponent wheather został podświetlony lub nie.

[ngClass]="{'list-item-highlight': opportunity.listItemHovered}"
(mouseenter)="hoverListItem(opportunity)"
(mouseleave)="hoverListItem(opportunity)"

Komponent

hoverListItem(opportunity) {
   opportunity.listItemHovered = !opportunity.listItemHovered;
}

Chociaż zaleca się użycie :hover klasa pseudo, jeśli wymaga wymaga, aby podświetlić element na HOVER. To może być łatwe do wykonania przez zmianę reguły CSS. W ten sposób można zapisać kilka cyklu wykrywania zmian.

.list-item:hover {
  background: #7e00cc;
  color: white;
}
4
Pankaj Parkar 21 luty 2019, 18:49

Sugerowałbym użyć directive, aby słuchać wydarzenia w Hover na elemencie docelowym i dołączyć klasę:

@Directive({
    selector: '[hoverDir]'
})


 export class HoverOverDirective { 
    @HostListener('mouseenter') onMouseEnter() {
       this.elementRef.nativeElement.class = 'list-item-highlight';
    }

     @HostListener('mouseleave') onMouseLeave() {
       this.elementRef.nativeElement.class = 'list-item-not-highlight';
     }
}

Lub najłatwiejszy sposób jest użycie CSS Pseud Nieruchomości :hover i Użyj go jak poniżej:

.list-item:hover {
  background: #7e00cc;
  color: white;
}  
1
nircraft 21 luty 2019, 18:52