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

我猜想在ngOnInit上，#owl-example的元素尚不存在，因为它与ngOnInit被调用的组件位于同一组件中。您必须使用ngAfterViewInit函数：

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

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

Answer 2

您可以在ngAfterViewInit hook

中编写此代码

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

Answer 3

我做到了，它有效！

import { Component, OnInit, AfterViewInit } from '@angular/core';

declare var jQuery: any;

@Component({
  selector: 'app-banners',
  templateUrl: './banners.component.html',
  styleUrls: ['./banners.component.css']
})
export class BannersComponent implements AfterViewInit {

  ngAfterViewInit(): void {
   jQuery('.slider').slider({full_width: true});
}


  constructor() { }

  ngOnInit() {


  }

}

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

3 个答案: