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

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

首先，您需要将tabindex 属性添加到section 以使其获得焦点事件。否则，它不会获得焦点事件。

Focus 事件在元素可聚焦时触发。每次单击该元素时，它总是会获得焦点，我们只能在元素外部单击时移除焦点。因此，我们无法移除对同一元素的 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>

在组件类中

casSee: boolean = false;

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

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