JQuery owlCarousel插件不能与Angular 2一起使用

Question

因为我是angular2的新手，我期待找到以下场景的解决方案。获取数据后，jQuery插件无效 - http://www.owlcarousel.owlgraphic.com/

我遇到了问题

`var owl = jQuery(this.elementRef.nativeElement).find('#breif'); owl.owlCarousel();` 

我的完整代码如下所示

angular 2分量：

/ beautify ignore:start /
import {Component, OnInit , ElementRef, Inject    } from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';
import {CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/components/carousel';
/ beautify ignore:end /
import {Api} from '../../../../services/api';

declare var jQuery:any;

@Component({
    selector: 'breif',
    directives: [CAROUSEL_DIRECTIVES],
    template: require('./template.html')
})

export class BreifComponent implements OnInit    {

  elementRef: ElementRef;
  breifs: Object;

public myInterval:number = 5000;
public noWrapSlides:boolean = false;
public slides:Array<any> = [];

    constructor(@Inject(ElementRef) elementRef: ElementRef ,  private api: Api) {
          this.elementRef = elementRef
          this.loadBreif();

      }

      ngOnInit() {

        **var owl = jQuery(this.elementRef.nativeElement).find('#breif');
        owl.owlCarousel();**

      }



    loadBreif(){
      this.api.getBreif().subscribe(
        data => {
          this.breifs = data.result.articles;

        },
        err => console.error(err),
        () => {

        }

      )

      }

}

template.html

<-div class="owl-carousel" id="breif"- ->
<div class="item" *ngFor="let breif of breifs"><h4>{{breif.title}}</h4></div->