Angular2 JQuery,如何制作document.ready函数

Question

我可以使用一些帮助,以便在没有任何按钮点击的情况下运行JQuery函数.现在它只有在我有一个按钮点击时才有效,所以JQuery会激活.

码

declare var jQuery: any;

@Component({
selector: 'home-component',
providers: [],
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
directives: [BannerComponent],
})

export class HomeComponent implements OnInit {

    constructor(public productService: ProductService, private elref: ElementRef) {

    }

    ngOnInit(): any {
        console.log("jQuery here");
        jQuery(this.elref.nativeElement).find('button').on('click', function ()          {
            jQuery('#owl-example').owlCarousel();
        });
    }

}

此代码在组件内部.它找到了按钮,点击后,它将运行jQuery函数.

我想要的是这条线:

jQuery('#owl-example').owlCarousel();

调用ngOnInit时触发(不点击任何按钮).为此,我需要实现JQuery:

$(document).ready(function() { }

这里的问题是它不起作用:)到目前为止,我所尝试的是代码的和平:

ngOnInit(): any {
    console.log("jQuery here");
    jQuery(this.elref.nativeElement).ready(function() {
        jQuery('#owl-example').owlCarousel();
    });
}

希望有人能提供帮助.

Answer 1

我猜想在ngOnInitid 上的元素#owl-example还没有存在,因为它与ngOnInit被调用的元素在同一个组件中.你必须使用这个ngAfterViewInit功能:

ngAfterViewInit(): void {
   jQuery('#owl-example').owlCarousel();
}

然后,您可以确保组件中的任何元素都存在于文档中.