Question

在我的代码中，以编程方式在print '{"name": "%s", "ranking": "%s", "tournamentsPlayed": %5d}' % ( name, ranking, tournamentsPlayed )上设置焦点，并不适用于IOS支持设备。它在其他地方按预期工作。我正在使用本地模板变量。这是一个片段，它应该将焦点设置为按钮点击上的输入：

HTML

<input>

DEMO

Answer 1

您可以使用以下内容：

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let item of [1,2,3,4]; let i = index">
      <button type="button" (click)="display(i)">Click to show and set focus</button>
      <input #theInput *ngIf="show === i" type="text" >
    </div>
  `,
})
export class App {
  show = -1; 

  @ViewChild('theInput')
  private theInput;

  constructor() {
  }

  display(i) {
    this.show = i;
    setTimeout(() => this.theInput.nativeElement.focus(), 0);
  }
}

我不确定是否有比使用setTimeout更优雅的东西，但由于输入仅在更改检测后添加到DOM，而更改检测由show {{1}的更改触发那时是未定义的（或先前显示的输入）。

演示：http://plnkr.co/edit/A0ZO0hyuR61nUdiSvzFj?p=preview

编辑：

事实证明有更优雅的东西：AfterViewChecked：

theInput

请参阅更新后的演示：http://plnkr.co/edit/lXTRDGLKwkAAukEQGQjq?p=preview

设置焦点不适用于IOS支持设备

1 个答案: