主页 / 问题 / 1138330
Accepted
Rakzin Roman
Asked:2020-06-09 00:29:22 +0000 UTC2020-06-09 00:29:22 +0000 UTC

不仅在组件中，而且在绑定中选择时，如何从组件中捕获焦点丢失并更改值？

  • 772

有一个改进的下拉框组件，它显示数据，然后我想向上传递选定的值，当焦点丢失时，隐藏下拉列表。这是代码

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

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

  public isOpen = false;

  constructor() { }

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

  change_value(item){
    this.selected = 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>

问题：
1）如果我离开组件，我不能“关闭”它
2）所选值在组件内保持选中状态，但不会作为双重绑定和 [selected]="store['sortCarsParameters' ]['selected' ]" 保持不变。如何改变这个值？

angular2

1 个回答

  1. Best Answer

    首先，@HostListener它不适用于无法获得焦点的组件。所以div它 ul也行不通。可以设置成tabIndex=0html中想要的元素，也可以直接挂在宿主机上。下面我将给出一个在组件上设置属性的示例。

    其次，双重绑定涉及出站事件。你的组件只接受模板中使用指令@Input()和方括号的值。

    因此，我们添加到组件@Output中。

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

}

    在连接中，您现在可以进行双向绑定[(...)]。

    <app-dropbox-comp [array]="store.sortCarsParameters.data" 
                  [(selected)]="store.sortCarsParameters.selected">
</app-dropbox-comp>

    或者使用绑定的分离：

    <app-dropbox-comp [array]="store.sortCarsParameters.data" 
                  [selected]="store.sortCarsParameters.selected"
                  (selectedChange)="updateSelected(/*здесь обрабатывайте изменение данных*/)">
</app-dropbox-comp>
    • 1

相关问题