Question

我在angular 2.0组件中使用一些JQuery库时遇到问题。问题是这个库OwlCarousel正在内部使用一些测量$('element).width()来正确应用。

在我的ngAfterViewinit内，我正在使用$(this.carousel.nativeElement).owlCarousel(options);

创建轮播

该方法的问题在于，无法保证在此生命周期样式中，添加到标头标记的角度已经被borwser重新计算并应用。

导致非确定性行为。有时轮播正在获得大小合适的元素 - 有时候它的速度太快而且大小为0，因为尽管样式元素已经在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);
  }
}

$（＆＃39; .slide＆＃39;）。ngAfterViewInit中的width（）为0。大部分时间都是正确测量的，但一次测量10次就有0。

Answer 1

问题解决了。它是由 @import url（＆＃39; http://fonts.googleapis.com/css?family=Noto+Sans:400,700＆＃39;）; 在我的一个css样式里面，由angular comonent添加。这是阻止css解释直到从谷歌下载。当javascript更快时，谷歌会以不良大小的元素回应结果，因为此声明下面的所有CSS样式：@import url（＆＃39; http://fonts.googleapis.com/css?family=Noto+Sans:400,700＆＃39;）; 尚未受到浏览器影响和应用的地方。

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

1 个答案: