Winkel 2 Fokus funktioniert nicht, wenn ich kein Timeout verwende

Question

Wie Sie sehen können, verwende ich setTimeout, wenn ich meine Eingaben fokussieren möchte. Wenn ich SetTimeout entfernen, funktioniert der Fokus nicht.

<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

Der Timeout ist erforderlich, da kann man nicht focus() ein Element, das immer noch verborgen ist. Bis die Erkennung von Winkelfehlern ausgeführt werden kann (nachdem die Methode showSearchInput() die Ausführung beendet hat), wird die hidden-Eigenschaft im DOM nicht aktualisiert, obwohl Sie in Ihrer Methode auf false gesetzt haben.

Ein setTimeout() mit einem Wert von 0 (oder kein Wert, der standardmäßig 0 ist) sollte funktionieren. Sie müssen nur den Fokus festlegen, nachdem Angular eine Chance erhält, den Eigenschaftswert hidden zu aktualisieren.

---

Beachten Sie, dass nach der setTimeout() Callback-Funktion die Ausführung beendet, Änderungserkennung erneut ausgeführt wird (weil Angular Affen Patches alle setTimeout() Anrufe, die in der Winkelzone gemacht werden). Da das einzige, was wir in unseren asynchronen Callback-Funktion ändern sich der Fokus ist, können wir effizienter sein und unsere Callback-Funktion außerhalb der Winkelzone laufen, die zusätzliche Änderungserfassungszyklus zu vermeiden:

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

Beachten Sie, dass‘ ll haben NgZone in Ihrem Konstruktor zu injizieren für den obigen Code zu arbeiten:

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

Answer 2

Wahrscheinlich versuchen so etwas wie dieses könnten Sie:

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