2017-03-02 10 views
0

Material Design Liteを使用したangular2コンポーネントがありますが、チェックボックス(おそらく他の要素)はコンポーネントの最初の読み込み時に正しくレンダリングされません。一方、チェックボックスと対話するとmdlスタイルが正しく適用されます。私のコンポーネントでは、私はプロダクションコードでsetTimeoutを使用するのは安全ですか?

ngAfterViewInit() { 
    componentHandler.upgradeDom(); 
} 

を持っているが、これは私の問題は解決しないので、私はサービスがいくつかのデータを返された直後に実行するのsetTimeoutを使用しました。これはうまくいくようですが、そのようにすることをお勧めしますか?純粋にあなたが(それは今まで何それは遅延を引き起こしている)競合状態を導入する理論的なレベルから、あなたのコードのインとアウトを知らず

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

ありますので、使用できます。あなたが使いたい場所と方法! – Smit

+0

'changeDetection:ChangeDetectionStrategy.OnPush'を試してみてください。[Change Detection Explained](https://blog.thoughtram.io/angular/2016/02/22/angular-2-change)に役立つ情報があります。 -detection-explan.html) –

答えて

0

は10ミリ秒以内に完了する必要があります。

いつもそうすることができますか?あなたが(100%の確実性で)できるなら、それはいいと言えるでしょう。しかし、経験からは、タイムアウトから遠ざかり、できるだけイベントを使用すると言っていました。

ちょうど注記:私はまだ角度2を使用していませんが、角度1ではダイジェストを手動でトリガする必要があることがわかります。これはここで起こっていることかもしれません。

1

質問にコンポーネント設定を追加すると役立ちます。 angular.ioドキュメントのComponent Stylesセクションを見てください。私はあなたのコンポーネントの注釈にセレクタとスタイルを追加するだけです。ドキュメントから:

@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 { 
    /* . . . */ 
} 
関連する問題