Açısal 2/4 ayarlı giriş elemanına odaklanma

Question

Odağı (tıklama) olayıyla bir girişe nasıl odaklayabilirim? Ben yerinde bu işlevi var ama açıkça denemek şey (burada açısal acemi)

sTbState: string = 'invisible'; 
private element: ElementRef; 
toggleSt() { 
    this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible'); 
    if (this.sTbState === 'visible') { 
    (this.element.nativeElement).find('#mobileSearch').focus(); 
    } 
} 

Answer 1

eksik bu:

size HTML dosyası: ts

<button type="button" (click)="toggleSt($event, toFocus)">Focus</button> 

<!-- Input to focus --> 
<input #toFocus> 

Dosya:

sTbState: string = 'invisible'; 

toggleSt(e, el) { 
    this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible'); 
    if (this.sTbState === 'visible') { 
    el.focus(); 
    } 
} 

Answer 2

Bunun için @ViewChild dekoratör kullanabilirsiniz. Belgeler, https://angular.io/api/core/ViewChild adresindedir. http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

Bu kod özü, iner, giriş elemanı ve kablolama kadar Şablonunuzdaki bir tıklama olayı bir isim vererek:

İşte çalışan bir plnkr bu. senin bileşeninde

<input #myInput /> 
<button (click)="focusInput()">Click</button> 

, o zaman, eleman (lar) için arama ihtiyacınız olan fonksiyonu gerçekleştirmek için tıklayın işleyicisi uygulamak için @ViewChild veya @ViewChildren uygular.

export class App implements AfterViewInit { 
    @ViewChild("myInput") inputEl: ElementRef; 

    focusInput() { 
    this.inputEl.nativeElement.focus() 
    } 

Şimdi, düğmeyi tıklattıktan sonra giriş alanında yanıp sönen düzeltme işareti görüntülenir. ElementRef kullanımı, XSS saldırıları (https://angular.io/api/core/ElementRef) gibi bir güvenlik riski, ve daha az taşınabilir bileşenlerle sonuçlandığı için önerilmez.

Ayrıca, ngAfterViewInit olayının ortaya çıkması durumunda, inputEl değişkeninin kullanılabilir olacağını unutmayın.