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>

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

Answer 1

您可以在组件类中创建一个valuateEvent函数，该函数可以根据分配给菜单项的类名注册事件。添加评估事件的引用（click）和（mouseover）事件的函数，传入$ event并传入菜单的className。（假设您要根据紧凑和宽泛的版本在菜单上附加不同的className）。

这是代码段。（我添加了一个按钮来切换紧凑和宽版。）根据版本（紧凑或宽幅），事件绑定到HelloAngular js按钮上

stackblitz链接-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 +：在点击和鼠标进入之间切换

1 个答案: