ViewChild和focus()

Question

我有一个包含文本区域的组件，默认情况下它是隐藏的：

<div class="action ui-g-2" (click)="toggleEditable()">edit</div>
<textarea [hidden]="!whyModel.inEdition" #myname id="textBox_{{whyModel.id}}" pInputTextarea focus="true" [(ngModel)]="whyModel.description"></textarea>

当我点击"edit“div时，我想要显示文本区域，并将焦点放在它上面：

@ViewChild('myname') input: ElementRef;
...
private toggleEditable(): void {
  this.whyModel.toggleEditable();
  this.input.nativeElement.focus();
}

"show“部分起作用了，但焦点部分不起作用。我错过了什么？

Answer 1

只有在运行更改检测时才更新绑定，这通常是在事件处理程序完成之后。这对于您的用例来说为时已晚，因为事件处理程序本身已经依赖于更改检测的效果。

您可以通过调用detectChanges()立即(同步)强制执行更改检测

constructor(private cdRef:ChangeDetectorRef) {}

@ViewChild('myname') input: ElementRef;
...
private toggleEditable(): void {
  this.whyModel.toggleEditable();
  this.cdRef.detectChanges();
  this.input.nativeElement.focus();
}

Answer 2

你也可以用AfterViewCheck‘强制’焦点。出于演示目的，我简化了您的代码：

Typescript:

  editable;

  @ViewChild('myname') input: ElementRef;
  private toggleEditable(): void {
      this.editable = !this.editable;
   }

   ngAfterViewChecked(){
     if(this.editable){
          this.input.nativeElement.focus();
     }
   }

HTML

<div class="action ui-g-2" (click)="toggleEditable()">edit</div>
<br>
<textarea [hidden]="!editable" #myname id="textBox_{{id}}" pInputTextarea
   focus="true" [(ngModel)]="description"></textarea>

Answer 3

您可以使用@ViewChild和focus()来关注特定的元素。它可以像这样使用：

超文本标记语言文件(abc.component.html)

<form #data="ngForm">
<input class="text-field" type="text" name="name" >
<input class="text-field" type="text" name="surname">
<input class="text-field" type="text" name="company">
</form>


<button type="submit" value="Submit" (click)="submitData(data.value)">Submit</button>


<input class="text-field" type="text" name="City" #setFocusField>
<input class="text-field" type="text" name="State">

在TypeScript文件(abc.component.ts)中

@ViewChild('setFocusField') setFocusField: any;

submitData(data:any){
  this.setFocusField.focus();
}

当您单击submit按钮时，焦点将被设置为"City“字段。

实现这一目标的另一种方式：

在上面的代码中，我们可以使用ElementRef代替ViewChild字段上的any。

在这种情况下，typescript文件更改将如下所示：

(abc.component.ts)

@ViewChild('setFocusField') setFocusField: ElementRef;

submitData(data:any){
  this.setFocusField.nativeElement.focus();
}