javascript - angular2+: クリックとマウス入力を切り替えます

Question

アプリ メニューのコンポーネントを作成しています。サブメニューは、メニューがコンパクト モードの場合は mouseenter で開く必要があり、ワイド モードの場合はクリックで開く必要があります (どちらもコンポーネント内の「nav」要素の css クラスです)。

<nav class="{{menuState}}">
    <ul>
        <li *ngFor="let child of menuitem.children; let i = index" class="menu-item" [ngClass]="{'display-menu': child.subOpen === true, '' : child.subOpen === false}" (mouseenter)="child.subOpen=true" (mouseleave)="child.subOpen=false" (click)="child.subOpen=true"></li>
    </ul>
<nav>

ラップする nav 要素に関連するクラスがある場合にのみ、mouseenter / click イベントを発生させるにはどうすればよいですか?