Question

我有一个组件，其中包含一个默认隐藏的textarea：

<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>

当我点击＆＃34;编辑＆＃34; div我想展示textarea并把重点放在它上面：

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

＆＃34; show＆＃34;部分工作但不是焦点部分。我错过了什么？

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“强制”关注焦点。我为演示目的简化了代码：

<强>打字稿：

  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>

<强> Stackblitz example

Answer 3

您可以使用@ViewChild和focus()专注于特定元素。可以这样使用：

在HTML文件（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();
}

当您单击提交按钮时，焦点将设置为“城市”字段。

另一种实现方法：

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

在这种情况下，打字稿文件的更改如下：

（abc.component.ts）

@ViewChild('setFocusField') setFocusField: ElementRef;

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

ViewChild和focus（）

3 个答案: