angular - 如何在角度或角度2而不是angularjs中设置自动对焦

Question

我看到很多关于如何通过创建指令或 HTML 自动对焦在 angularjs 中的输入文件上设置自动对焦的帖子，是否有一种快速简便的方法来设置角度焦点（角度 2、角度 4 等）

Answer 1

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

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

然后将自动焦点应用到其中。

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

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

Answer 2

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

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“假”。当前值：“真”。

一种解决方案是将 focus() 调用包装在 ngInit() 而不是 ngAfterViewInit() 中。因此，延伸阿尼杜达的回答：

在您的 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 3

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

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

Answer 4

这个是为我做的，因为我的输入元素可以根据某些属性显示或隐藏。

模板：

<input #captionElement matInput>

代码：

@ViewChild('captionElement') captionField: ElementRef;

如果项目将显示/隐藏（通过 *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();
  }
}

Answer 5

您可以使用投票最多的答案的示例，但有时您需要将焦点放在 setTimeout 内以进行“异步”调用。在我的情况下，我需要将 setTimeout 放在角度材料的垫自动完成组件的选定过滤器中。

我的代码看起来像这样

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

Answer 6

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

或者

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