Ustawienie Angular 2 focus nie działa, jeśli nie używam limitu czasu.

Question

Jak widać używam setTimeout, jeśli mam zamiar skupić moje dane wejściowe. Jeśli usunę fokus setTimeout nie działa.

<div [hidden]="searchInputHidden"> 
     <input (blur)="hideInput()" #term (keyup)="search(term.value)" type="text" class="inp_top" name="product_name" id="product_name" /> 
    </div> 


private showSearchInput(term) { 
    this.searchInputHidden = false; 
    setTimeout(function(){ 
     term.focus(); 
    }, 100); 
    } 

Answer 1

Limit czasu jest potrzebne, ponieważ nie można focus() elementem, który jest nadal ukryte. Dopóki kątowe wykrywanie zmian nie zostanie uruchomione (co będzie po zakończeniu wykonywania metody showSearchInput()), właściwość hidden w modelu DOM nie zostanie zaktualizowana, mimo że w metodzie ustawiono searchInputHidden na false.

A setTimeout() o wartości 0 (lub brak wartości, która domyślnie wynosi 0) powinna działać. Po prostu musisz ustawić fokus po tym, jak Angular uzyska szansę na zaktualizowanie wartości właściwości hidden.

---

Należy pamiętać, że po zakończeniu funkcji setTimeout() zwrotna wykonywania, wykrywanie zmian będzie działać ponownie (bo kątowe małpa łatami wszystkie setTimeout() rozmowy, które są wykonane w strefie kątowej). Ponieważ jedyną rzeczą, którą zmienia się w naszej asynchronicznego funkcji wywołania zwrotnego jest tematem, możemy być bardziej wydajny i uruchomić naszą funkcję zwrotną poza strefą kątowe, w celu uniknięcia dodatkowego cyklu wykrywania zmian:

private showSearchInput(term) { 
    this.searchInputHidden = false; 
    this._ngZone.runOutsideAngular(() => { 
    setTimeout(() => term.focus()); 
    }); 
} 

pamiętać, że” będziesz musiał wstrzyknąć NgZone do swojego konstruktora dla powyższy kod do pracy:

export class YourComponent { 
    constructor(private _ngZone: NgZone) {} 

Answer 2

Prawdopodobnie można spróbować czegoś takiego:

<div class="row col-md-12" [hidden]="messagehide"> 
{{_result.msgDesc}} 
</div> 
`this.messagehide=false; 
this.messagealert(); 
messagealert(){ 
setTimeout(function() { 
this.messagehide=true;   
},3000); 
}` 

My settimeout function also didn't work . let me know.