Angular 自动对焦只工作一次

单击输入时，自动聚焦仅在第一个实例上工作-因此“列表格式化程序”（AutoCompleteListFormatter）仅启动一次

是否有一个简单的解决方案可以使“自动对焦”对焦多次

下拉列表.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>

下拉列表.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: ''
    });
  }
}

导出类DropdownComponent实现OnInit、AgeEdit或Component{
@Input（）名称：String；
public dropdownData=ColumnData[0]。cellEditorParams.values；
公共myForm:FormGroup；
公众选择；
价值：任何；
oldValue：任何；
参数：任何；
公共集装箱；
构造函数（私有生成器：FormBuilder，私有_sanitizer:domsanizizer）{}
//****下拉列表*******//
AutoCompleteListFormatter=（数据：任意）=>{
让html=`${data.name}`；
返回此。\u sanitizer.bypassSecurityTrustHtml（html）；
};
刷新（参数：ICellEditorParams）{
this.params.api.refreshCells（）；
返回true；
}
getValue（）：任何{
如果（this.value==''）{
this.value=this.oldValue；
}
返回此.value；
}
agInit（参数：ICellEditorParams）{
this.value=params.value；
this.oldValue=this.value；
这个值=“”；
返回此.value；
}
恩戈尼尼特（）{
this.myForm=this.builder.group({
成本中心：“”
});
}
}

---

更新：我已经读到实现一个。我已将指令添加到代码中，但无法使其正确运行

这可以在没有指令的情况下完成，只需获取输入元素引用并运行

聚焦

方法

模板

---

演示可能发生的情况是，您希望在每次显示下拉列表时聚焦，但只渲染一次。也许你需要在另一个事件上做它，比如单击元素和/或将它放在其他事件中？感谢@akkonrad，我一开始确实这么认为，但你会从gif中看到，在第二个实例中，它没有聚焦，所以我必须再次单击下拉列表的输入，以显示你可以提供可行的stackblitz示例吗？我添加了stackblitz，请看上面@akkonradI希望在您查看此演示之前，这会起作用，谢谢@malbarmawi。我已经添加了该指令并在app.module中声明了它，但似乎没有在ngAfterViewInit（）{}中获得console.log输出。还有其他地方我应该申报吗？我无法测试您的演示，但我已经更新了我的答案，方法是创建一个对该输入元素的视图查询，并在您想要的时候调用它，比如当数据刷新时，您可以控制它。我已经拉取了您的项目并进行了测试。您似乎需要在半秒后调用Focus，这将使其工作。您可以用'Promise.resolve（）替换超时块.then（（）=>this.setFocus（））`如果您毫不延迟地运行focus，ui将不再工作，可能是因为autocomplete或其他东西尚未完全初始化，这样我们将安排方法

（）=>this.setFocus（）

在没有任何东西运行时意味着所有东西都完成初始化

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