Привязка одного и того же события при наведении курсора к нескольким [ngClass]

Question

<li class="dropdown-submenu dropdown pointer" (mouseover)="toogleClickEvent($event)" (mouseout)="toogleClickEvent($event)"
  [ngClass]="show">
  <a class="test" tabindex="-1"><i class="fa fa-language " aria-hidden="true"></i>{{'Language' | translate}}</a>
  <ul class="dropdown-menu">
    <li class="pointer"><a (click)="changeLang('en')">{{'English' | translate}}</a></li>
  </ul>
</li>

<li class="dropdown-submenu dropdown pointer" (mouseover)="toogleClickEvent($event)" (mouseout)="toogleClickEvent($event)"
  [ngClass]="show1">
  <a href="#"><i class="fa fa-gear" aria-hidden="true"></i>&nbsp;&nbsp;{{'Settings' | translate}}</a>
  <ul class="dropdown-menu">
    <li class="pointer"><a>{{'Default' | translate}}</a></li>
  </ul>
</li>

app.ts

export class app{
   show: string;
   toogleClickEvent($event) {
      this.show =   $event.type == 'mouseover' ? 'open' : '';
   }
}

В приведенном выше коде у меня есть два раскрывающихся списка, где я вызываю toogleClickEvent () в обоих раскрывающихся списках, но из-за того же метода и того же [ngclass] для обоих значений раскрывающегося спиская получаю так, как обрабатывать два разных [ngclss] с помощью одного метода, кроме создания нового метода

Answer 1

использование (mouseover)="show='open'" (mouseout)="show=''" [ngClass]="show"

<li class="dropdown-submenu dropdown pointer" (mouseover)="show='open'" (mouseout)="show=''"
  [ngClass]="show">
  ....
</li>

<li class="dropdown-submenu dropdown pointer" (mouseover)="show1='open'" (mouseout)="show1=''"
  [ngClass]="show1">
  ....
</li>

Answer 2

Вы можете передать тег внутри своей функции как

toogleClickEvent($event,'test') 

Затем в вашем файле ts сделайте что-то вроде этого

toogleClickEvent($event,type) {
   if(type=='test') {
      this.show =   $event.type == 'mouseover' ? 'open' : '';
 }
   if(type=='test1') {
      this.show1 =   $event.type == 'mouseover' ? 'open' : '';
 }
}