Angular 2：focusin和focusout可以在一个事件中吗？

Question

focusin 和 focusout 可以在一个事件中吗？那它叫什么？如果没有，有没有办法将其合并到一个函数中？

hide(e:any) {
  $('.suggestion').hide();
}
show(e:any) {
  $('.suggestion').show();
}

<section class="search-bar-wrapper" (focusout)="hide($event)" (focusin)="show($event)">

Answer 1

首先你需要给section添加tabindex属性来让它获得焦点事件。否则得不到焦点事件。

焦点事件在元素可聚焦时触发。每次单击该元素时，它总是会获得焦点，我们只能在元素外部单击时移除焦点。因此，我们无法移除对同一元素的 click 事件的关注。

focus 和 focusout 都是不同的事件，我们无法合并它们

您也可以使用*ngIf

<section 
    class="search-bar-wrapper" 
    tabindex="-1" 
    (focus)="show($event)" 
    (focusout)="hide($event)"
>

<div class="suggestion" *ngIf="canSee">
    This is a suggestion
</div>

在组件class中

casSee: boolean = false;

show(e: any) {
   this.canSee = true;
}

hide(e: any) {
   this.canSee = false;
}

Answer 2

您可以在 Angular 2/4 中使用 (focus) 和 (focusout)。

Angular 2：focusin和focusout可以在一个事件中吗？

Angular 2: Can focusin and focusout be in one event?

events

show

hide

angular