angular - how to handle directive from another directive angular 6

Question

• Hi everyone !. I have an issue with directive in angular 6. I have directive add class to element when i clicked on this and i want remove it when i click on another element or click outside. Please see attached images

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

标签： angularonclicklistenerdirective

Answer 1

如果你想捕捉外部点击，你应该使用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>

我相信这会解决你的问题。您可以在这里进行一次有效的堆栈闪电战。