Javascript ngAfterViewInit中浏览器未应用Angular2组件样式/css

我在angular 2.0组件中使用一些JQuery库时遇到问题。问题是该库OwlCarousel在内部使用了一些度量值

$（'element）.width（）

，以便正确应用

在我的

ngAfterViewinit

中，我正在使用

$（this.carousel.nativeElement）.owlCarousel（选项）创建旋转木马

这种方法的问题在于无法保证，在这个生命周期中，添加到标题标记的angular样式已经被borwser解释、重新计算和应用

它会导致非确定性行为。有时carousel会得到很好的元素大小，但有时它的速度太快，大小为0，因为尽管样式元素已经在HTML的head标记中，但浏览器不会应用它。有什么建议吗

@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);
  }
}

@组件({
选择器：“tc滑块”，
风格：[`
.幻灯片{
宽度：100px；
}
`],
模板：`
1.
2.
3.
4.
`,
封装：视图封装。无，
})
导出类滑块组件{
@ViewChild（“旋转木马”）旋转木马：ElementRef；
ngAfterViewInit（）{
变量选项：任意={
mouseDrag:错，
自动宽度：真
};
$（this.carousel.nativeElement）.owlCarousel（选项）；
}
}

ngAfterViewInit中的$（'.slide'）.width（）为0。大部分时间测量正确，但每10次测量一次，其值为0。
问题已解决。这是由于
@导入url（“”）；
在我的一个css样式中，由angular组件添加。这是阻止css解释，直到从谷歌下载。当javascript比google更快时，它的响应结果是元素的大小不好，因为下面的所有css样式都是：@import url（“”）；
浏览器尚未使用和应用的位置。
问题已解决。这是由于
@导入url（“”）；
在我的一个css样式中，由angular组件添加。这是阻止css解释，直到从谷歌下载。当javascript比google更快时，它的响应结果是元素的大小不好，因为下面的所有css样式都是：@import url（“”）；
浏览器尚未提示和应用的地方。
请发布代码，演示您尝试完成的内容、尝试的内容以及失败的地方。请发布代码，演示您尝试完成的内容、尝试的内容以及失败的地方。