将jQuery插件添加到Angular 2组件

Question

I am trying to add a snippet of jQuery code to a component that I got online. Specifically this.

I already have the HTML and the CSS implemented into the code but I am having troubles getting the jQuery to load at all. I used <script> tags at the bottom of the html part but it doesn't seem to work. Any ideas?

Answer 1

You can use ViewChild decorator to get the reference of HTML content and then use that reference in you component inside ngAfterViewInit life cycle hook.You can use the reference any where inside your component but if want to do any kind of initialisation using jQuery then ngAfterViewInit is a suitable place to do that.

for example if the HTML template have following code.

<!-- my-component.html-->

<section class="cd-hero">
    <ul class="cd-hero-slider">
        <li class="selected">
            <div class="cd-full-width">
                <h2><!-- title here  --></h2>
                <p><!-- description here --></p>
                <a href="#0" class="cd-btn"><!-- btn text here --></a>
            </div> <!-- .cd-full-width -->
        </li>

        <!-- othe slides here -->

    </ul> <!-- .cd-hero-slider -->

    <div class="cd-slider-nav" #cdSliderNav >
        <nav>
            <span class="cd-marker item-1"></span>

            <ul>
                <li class="selected"><a href="#0">Intro</a></li>
                <li><a href="#0">Tech 1</a></li>
                <!-- other navigation items here -->
            </ul>
        </nav> 
    </div> <!-- .cd-slider-nav -->
</section> <!-- .cd-hero -->

then I can get the reference of cdSliderNav variable in my component as follows.

//myComponent.ts

declare var jQuery: any

@Component({
  selector:'my-component',
  templateUrl:'my-component.html',
  styleUrls:['my-component.css']
})
export class MyComponent implements AfterViewInit{
  @ViewChild('cdSliderNav') cdSliderNav:ElementRef;

  ngAfterViewInit() {
      jQuery(this.cdSliderNav.nativeElement).on('click',
       event => {
                   //Handle click event here..
                  console.log(event);
                }
      )
  }
}

you can also declare jQuery variable inside your typings file if you don't want to declare it separately for each component file.And make sure that you have included jQuery file inside your index.html file.

Once we got the reference to the main div then we can use jQuery methods to select its child or do whatever we want using jQuery. for ex. to select li elements inside my cdSliderNav i can use the find() method.

jQuery(this.cdSliderNav.nativeElement).find('li')

i hope this will help.