Question

大家好！我在angular 6中遇到指令问题。单击此指令时，我已将指令添加类添加到元素，并且当我单击另一个元素或单击外部时，我想将其删除。请查看附件图片

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

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>

我相信这会解决您的问题。您可以拥有一个working stackblitz here。

如何从另一个指令角度6处理指令

1 个答案: