как обращаться с директивой из другой угловой директивы 6 - PullRequest
Новая
       6

как обращаться с директивой из другой угловой директивы 6

0 голосов
/ 27 сентября 2018
  • Привет всем!У меня проблема с директивой angular 6. У меня есть директива add class к элементу, когда я щелкаю по этому элементу, и я хочу удалить его, когда нажимаю на другой элемент или щелкаю снаружи.Пожалуйста, смотрите прикрепленные изображения 

import { Directive, HostBinding, HostListener  } from '@angular/core';

@Directive({
  selector: '[expandMenu]'
})
export class ExpandMenuDirective {

  constructor() { }

  @HostBinding('class.active') isOpen = false;
  @HostListener('click') toggleOpen($event){
    this.isOpen = !this.isOpen;
  }
}

1 Ответ

0 голосов
/ 27 сентября 2018

Если вы хотите захватить щелчок снаружи, вы должны использовать blur, однако, если вы используете его на div, это никогда не работает, так как содержимое div не редактируется.

Но есть обходной путь.Допустим, это ваша директива: 

import { Directive } from '@angular/core';

@Directive({
  selector: '[classHandler]',
  host: {
    '(click)':'_setInputFocus(true)',
    '(blur)':'_setInputFocus(false)',
    '[class.md-input-focus]':'inputFocusClass'
  }
})

export class ClassHandler {
  inputFocusClass: boolean = false;

  _setInputFocus(isFocus: boolean) {
    this.inputFocusClass = isFocus;
  }
}

А теперь вы используете это в div или в вашем пункте меню: 

<div classHandler>This is a placeholder</div>

Это не будет работать, но если вы добавите tabindex="1", тогда это будет работать: 

<div tabindex="1" classHandler>This is a placeholder</div>

Я считаю, что это решит вашу проблему.Вы можете иметь рабочий стек стека здесь .

...