angular2 +: переключение между щелчком мыши и вводом мыши - PullRequest
Новая
       21

angular2 +: переключение между щелчком мыши и вводом мыши

0 голосов
/ 23 февраля 2019

Я создаю компонент для меню моего приложения.Подменю необходимо открывать при вводе мышью, когда меню находится в компактном режиме, и по щелчку при работе в широком режиме (оба являются классами css для элемента nav в компоненте). 

<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 запускались только тогда, когда у элемента навигации есть соответствующий класс?

1 Ответ

0 голосов
/ 23 февраля 2019

В классе компонента вы можете создать функциюvaluEvent, которая может регистрировать событие в зависимости от имени класса, назначенного вашему пункту меню.Добавьте ссылку на функциюvaluEvent события (click) и (mouseover) и передайте в событие $ и передайте className меню (предполагается, что вы добавляете другое имя className в свое меню в зависимости от компактной и широкой версии),

Вот фрагмент.(Я добавил кнопку для переключения компактной и широкой версии).События привязываются к кнопке HelloAngular js в зависимости от версии - компактная или широкая

ссылка на стек стека - 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();
                        }
                    } 
                    }
...