Question

单击“输入”时，自动对焦仅在第一个实例上起作用-因此，“列表格式器”（autocompleListFormatter）仅启动一次。

是否有一种简单的解决方案可以使“自动对焦”焦点超过一次？

dropdown.component.html

<form [formGroup]="myForm" class="">
  <div class="form-style">
    <input
      autofocus
      [list-formatter]="autocompleListFormatter"
      type="text"
      class="form-control"
      ngui-auto-complete
      formControlName="costCenter"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      [(ngModel)]="value"
    />
  </div>
</form>

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;

  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public selected;
  value: any;
  oldValue: any;
  params: any;
  public container;
  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

// ****DROPDOWN****** //
  autocompleListFormatter = (data: any) => {
    let html = `<span>${data.name}</span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };

  refresh(params: ICellEditorParams) {
    this.params.api.refreshCells();
    return true;
  }

  getValue(): any {
    if (this.value === '') {
      this.value = this.oldValue;
    }
    return this.value;
  }

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }

  ngOnInit() {
    this.myForm = this.builder.group({
      costCenter: ''
    });
  }
}

STACKBLITZ

更新：我已经阅读到实现auto-focus directive很有用。我已将指令添加到我的代码中，但无法使其正常运行

Answer 1

这可以在没有指令的情况下完成，只需获取输入的基本信息并运行focus方法

模板

<form [formGroup]="myForm" class="">
  <div class="form-style">
    <input
      defFocus
      [list-formatter]="autocompleListFormatter"
      type="text"
      class="form-control"
      ngui-auto-complete
      formControlName="costCenter"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      [(ngModel)]="value"
      #agInput
    />
  </div>
</form>

组件

export class DropdownComponent implements OnInit, AgEditorComponent {

  @Input() name: String;
  @ViewChild('agInput', { static: true}) public elm: ElementRef;

  ....

  setFocus() {
    this.el.nativeElement.focus();
  }

   ngAfterViewInit() {
     setTimeout(() => {
        this.setFocus();
     }, 500);
   }
}

demo ?

检查我的答案?here，在其中创建自定义指令以解决焦点问题。

自动对焦只能使用一次

1 个答案: