angular2+：在点击和鼠标输入之间切换

Question

我正在为我的应用程序菜单构建一个组件。子菜单需要在菜单处于紧凑模式时在 mouseenter 上打开，在宽模式下需要在单击时打开（对于组件内的 "nav" 元素，两者都是 css classes ).

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

如何使 mouseenter/click 事件仅在包装导航元素具有相关 class 时触发？

Answer 1

您可以在组件 class 中创建一个 evaluateEvent 函数，它可以根据分配给菜单项的 classname 注册一个事件。添加 evaluateEvent 的引用 (click) 和 (mouseover) 事件的函数并传入 $event 并传入 class 菜单名称。（假设您根据紧凑型向菜单附加不同的 className和宽版）。

这是片段。（我添加了一个用于切换紧凑版和宽版的按钮）。事件根据版本绑定在 HelloAngular js 按钮上 - 紧凑型或宽型

stackblitz link - https://stackblitz.com/edit/angular-vmpivu 文件-hello.component.ts

                    import { Component, Input } from '@angular/core';
                    @Component({
                    selector: 'hello',
                    template: `<button (click)="evaluateEvent($event,classType)" 
                               (mouseover)="evaluateEvent($event,classType)" 
                               [ngClass]="classType"> Hello {{name}}!</button><br/>
                       <br/>
                    <button (click)="toggleClass($event)">Toggle Class 
                    ({{this.classType}}--{{this.text}})</button>
                    `,
                    styles: [`h1 { font-family: Lato; }`]
                    })
                    export class HelloComponent  {
                    @Input() name: string;
                    classType:String="compact";
                    text:String="mouseover bind";
                    toggleClass(ev)
                    {
                        if(this.classType==='compact'){this.classType= 
                        'wide';this.text="click bind"}
                        else if(this.classType==='wide'){this.classType= 
                        'compact';this.text="mouseover bind"}
                    }
                    compactHandler()
                    {
                        alert('Hi am a compact handler');
                    }
                    widehandler()
                    {
                        alert('Hi am a wide handler');
                    }

                    evaluateEvent(ev:any,classType){
                        if((ev.type==="click")&&(classType==="wide")){
                            return this.compactHandler();
                        }
                        else if((ev.type==="mouseover")&&(classType==="compact")){
                            return this.widehandler();
                        }
                    } 
                    }

angular2+：在点击和鼠标输入之间切换

angular2+: Toggle between click and mouseenter

javascript

angular

angular-cli-v7