Angular2のコンポーネントスタイル/ CSSがngAfterViewInitのブラウザで適用されていません

Question

私のangle 2.0コンポーネント内にJQueryライブラリを使用する際に問題があります。問題は、このライブラリOwlCarouselが内部で正確に適用されるいくつかの測定値$('element).width()を使用していることです。 $(this.carousel.nativeElement).owlCarousel(options);

そのアプローチの問題との私のngAfterViewinit私が作成していカルーセル内

は角が既に再計算し、borwserによって適用解釈されるタグをヘッダに追加このライフサイクルスタイルのものは、保証がないことです。

この結果、非決定論的な動作になります。時にはカルーセルが要素のサイズが大きくなっていることもあります。その理由は、スタイル要素が既にHTMLの先頭タグにあるにもかかわらず、ブラウザーで適用されていないためです。何かアドバイス？

@Component({ 
    selector: 'tc-slider', 
    styles: [` 
    .slide{ 
     width:100px; 
    } 
    `], 
    template: ` 
    <div class="wrapper"> 
    <div #carousel> 
     <div class="slide">1</div> 
     <div class="slide">2</div> 
     <div class="slide">3</div> 
     <div class="slide">4</div> 
    </div> 
    </div>`, 
    encapsulation: ViewEncapsulation.None, 
}) 
export class SliderComponent { 
    @ViewChild('carousel') carousel:ElementRef; 
    ngAfterViewInit() { 
    var options:any = { 
     mouseDrag: false, 
     autoWidth: true 
    }; 
    $(this.carousel.nativeElement).owlCarousel(options); 
    } 
} 

$（ '。slide'）。width（）はngAfterViewInitでは0です。ほとんどの時間は正確に測定されますが、10回に1度は0になります。

Answer 1

問題が解決しました。それは、@import url（ 'http://fonts.googleapis.com/css?family=Noto+Sans:400,700'）;によって引き起こされた によって引き起こされました。角型で追加されたCSSスタイルの中の これは、GoogleからダウンロードするまでCSSの解釈をブロックしていた。 javascriptが高速だった場合、このステートメントの下にあるすべてのCSSスタイルが原因で、要素の不正なサイズが返されます。@import url（ 'http://fonts.googleapis.com/css?family=Noto+Sans:400,700'）; まだブラウザでは表示されていません。