Ist es sicher, setTimeout im Produktionscode zu verwenden?

Question

Ich habe eine angular2 Komponente mit Material Design Lite, aber die Checkbox (wahrscheinlich auch andere) Elemente werden nicht richtig beim ersten Laden der Komponente gerendert, während, wenn ich mit den Kontrollkästchen interagiere, der MDL Style korrekt angewendet wird. In meiner Komponente habe ich

ngAfterViewInit() { 
    componentHandler.upgradeDom(); 
} 

aber das ist mein Problem nicht beheben, so habe ich eine SetTimeout ausgeführt werden nur, nachdem der Dienst einige Daten zurückgegeben hat. Das scheint zu funktionieren, aber ist es empfehlenswert, es so zu machen?

this.service.getDetails(this.id) 
      .finally(() => { 
       setTimeout(() => { 
        componentHandler.upgradeDom(); 
       }, 10); 
      }) 
      .subscribe((details) => { 
       this.details = details; 
      }); 

Answer 1

Ohne die In und Outs des Codes zu kennen, rein aus einer theoretischen Ebene Ihnen eine Race-Bedingung einzuführen, wo (was auch immer es ist, dass die Verzögerung verursacht) muss innerhalb von 10 ms beenden.

Können Sie bestätigen, dass dies immer der Fall ist? Wenn Sie (mit 100% Sicherheit) können, würde ich sagen, dass es in Ordnung ist. Aus Erfahrung würde ich jedoch sagen, dass man von Timeouts abweicht und stattdessen Ereignisse verwendet, wenn möglich.

Nur ein Hinweis: Ich habe noch nicht Angular 2 verwendet, aber ich weiß, dass in Angular 1 der Digest manchmal manuell ausgelöst werden muss. Dies könnte sein, was hier vor sich geht.

Answer 2

Es würde helfen, wenn Sie Ihre Komponente Setup zu der Frage hinzufügen. Sehen Sie sich den Abschnitt "Komponentenstile" in den angular.io-Dokumenten an. Ich schätze, Sie müssen lediglich den Selektor und Stil zur Annotation Ihrer Komponente hinzufügen. Aus der Dokumentation:

@Component({ 
    selector: 'hero-app', 
    template: ` 
     <h1>Tour of Heroes</h1> 
     <hero-app-main [hero]=hero></hero-app-main>`, 
    styles: ['h1 { font-weight: normal; }'] 
}) 
export class HeroAppComponent { 
    /* . . . */ 
}