如何在 angular 或 angular 2 而非 angularjs 中设置自动对焦

Question

我看到很多关于如何通过创建指令或 HTML 自动对焦在 angularjs 中对输入文件设置自动对焦的帖子，有没有一种快速简便的方法可以在 angular (angular 2, angular 4 等)

Answer 1

<input type="text" #textInput placeholder="something" (focus)="someFunction(textInput.value)"/>

或

<input type="text" #textInput placeholder="something" (keyup.enter)="someMethod(textInput.value)"/>

Answer 2

在您的 html 中添加 #nameit 以在组件代码中获取其引用。

<input type="text" name="me" #nameit>

然后应用自动对焦。

  @ViewChild('nameit') private elementRef: ElementRef;

  public ngAfterViewInit(): void {
    this.elementRef.nativeElement.focus();
  }

Answer 3

Aniruddha Das 的回答在某些情况下效果很好。但是，如果将其应用于需要验证的基于模板的表单，您可能会收到以下错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after >it was checked. Previous value: 'false'. Current value: 'true'.

一个解决方案是将 focus() 调用包装在 ngInit() 中而不是 ngAfterViewInit() 中。因此，扩展 Aniduddha 的回答：

在您的 html 中将 #namedReference 添加到组件：

<input type="text"
    placeholder="Your full name"
    name="name"
    ngModel
    #fullName="ngModel"
    required
    #nameit>

然后使用 onNgInit() 将自动对焦应用到其中：

@ViewChild('nameit') private elementRef: ElementRef;

ngOnInit() {
    this.elementRef.nativeElement.focus();
}

Answer 4

您可以使用投票最多的答案作为示例，但有时您需要将焦点放在 setTimeout 中才能进行 "async" 调用。在我的例子中，我需要将 setTimeout 放在 angular material.

的 mat-autocomplete 组件的选定过滤器中

我的代码是这样的

   setTimeout(() => this.qtdeRef.nativeElement.focus());

Answer 5

<input id="name" type="text" #myInput />
{{ myInput.focus() }}

将 {{ myInput.focus() }} 添加到您的模板中。

Answer 6

这是为我做的，因为我的输入元素可以显示或隐藏，具体取决于属性。

模板：

<input #captionElement matInput>

代码：

@ViewChild('captionElement') captionField: ElementRef;

如果该项目 show/hide（通过 *ngIf）像：

<ng-container *ngIf="editModeCaption; then editCaption else viewCaption" >
</ng-container>
<ng-template #editCaption>
  <mat-form-field>
   <mat-label>Image Caption</mat-label>
     <input  #captionElement matInput>
  </mat-form-field>
</ng-template>
<ng-template #viewCaption>
   ...
</ng-template>

其中 editModeCaption 是您的容器（告诉我是否处于编辑模式）组件的属性。不要将它放在 ngAfterViewInit() 上，而是放在 ngAfterViewChecked（AfterViewChecked 接口）上。像这样：

ngAfterViewChecked(): void {
  if (this.editModeCaption) {
    this.captionField.nativeElement.focus();
  }
}

如何在 angular 或 angular 2 而非 angularjs 中设置自动对焦

How to set autofocus in angular or angular 2 not angularjs

angular

angular4