主页 / 问题 / 1138384
Accepted
Rakzin Roman
Asked:2020-06-09 01:59:11 +0000 UTC2020-06-09 01:59:11 +0000 UTC

如何捕捉组件失去焦点？

  • 772

有一个改进的下拉框组件，当焦点丢失时，我想隐藏下拉列表。这是代码

import { Attribute, Component, Input, HostListener, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dropbox-comp',
  templateUrl: './dropbox.component.html',
  styleUrls: ['./dropbox.component.scss']
})
export class DropboxComponent{
  @Input() selected: object;
  @Input() array: [];

  @Output() selectedChange = new EventEmitter<object>();

  public isOpen = false;

  constructor(@Attribute('tabindex') public tabIndex: number = 0) {}

  toggle(){
    this.isOpen = !this.isOpen;
  }

  change_value(item){
    this.selectedChange.emit(item);
  }

  @HostListener("blur") //Не работает
  lostfocus(){
    this.isOpen = false;
  }

}

标记

<div class="dropdown selectDropdown" [ngClass]="{'open': isOpen}" (click)="toggle()" (blur)="lostfocus()">
  <ul (blur)="lostfocus()">
    <li *ngFor="let item of array; let i = index" (click)="change_value(item)"><a>{{item.name}}</a></li>
  </ul>
  <span>{{selected['name']}}</span>
</div>

联系

    <app-dropbox-comp [array]="store['sortCarsParameters']['data']"  
 [selected]="store['sortCarsParameters']['selected']"></app-dropbox-comp>
angular2

1 个回答

  1. Best Answer

    autoclose在@overthesanity 抛出的那些示例中，当您制作一个可以附加到任何实体的通用示例时，这是有道理的。它是可扩展的，可扩展的，无论如何。

    然后，当然，您不应该将任何内部关闭逻辑和其他杂散的东西连续挂在所有东西上，这些东西不清楚它们是如何在幕后工作的。

    在您的特定情况下，您可以使用该技巧focus/blur来模拟来自外部的点击。在这里你可以看到一个例子

    如果 Dropbox 模板中有一些元素可以被聚焦，则必须单独制定这种情况，以便将焦点转移到主机。

    • 1

相关问题