ViewChildとフォーカス（）

Question

は、私は、デフォルトでは隠されているテキストエリアが含まれているコンポーネントがあります。

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

「ショー」部分は機能していますが、フォーカス部分は機能していません。何が欠けていますか？

Answer 1

バインディングは、変更検出が実行されるときにのみ更新されます。通常、イベントハンドラが完了した後です。これは、イベントハンドラ自体がすでに変更検出の効果に依存しているため、ユースケースに遅れることになります。

あなたはAfterViewCheckでフォーカスすることができますまた、「力」detectChanges()

constructor(private cdRef:ChangeDetectorRef) {} 

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

Answer 2

を呼び出すことによって、（同期的）すぐに変化検出を強制することができます。私は、デモの目的のために、あなたのコードを簡素化：

活字体：

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