在我的Angular项目中使用一些jquery代码

Question

I am using Angular 8, I have some code that I would like to add to my app.component.ts The code already works on a standalone html file that I've been testing it in but I would now like to transfer it to my angular component.

Here is the code:

<script>
$(function() {

  var $input = $("input[type='search']"),
  $clearBtn = $("button[data-search='clear']"),
  $prevBtn = $("button[data-search='prev']"),
  $nextBtn = $("button[data-search='next']"),
  $content = $(".content"),
  $results,
  currentClass = "current",
  offsetTop = 50,
  currentIndex = 0;

  /**
   * Jumps to the element matching the currentIndex
   */
  function jumpTo() {
    if ($results.length) {
      var position,
        $current = $results.eq(currentIndex);
      $results.removeClass(currentClass);
      if ($current.length) {
        $current.addClass(currentClass);
        position = $current.offset().top - offsetTop;
        window.scrollTo(0, position);
      }
    }
  }

  /**
   * Searches for the entered keyword in the
   * specified context on input
   */
  $input.on("input", function() {
    var searchVal = this.value;
    $content.unmark({
      done: function() {
        $content.mark(searchVal, {
          separateWordSearch: true,
          done: function() {
            $results = $content.find("mark");
            currentIndex = 0;
            jumpTo();
          }
        });
      }
    });
  });

  /**
   * Clears the search
   */
  $clearBtn.on("click", function() {
    $content.unmark();
    $input.val("").focus();
  });

  /**
   * Next and previous search jump to
   */
  $nextBtn.add($prevBtn).on("click", function() {
    if ($results.length) {
      currentIndex += $(this).is($prevBtn) ? -1 : 1;
      if (currentIndex < 0) {
        currentIndex = $results.length - 1;
      }
      if (currentIndex > $results.length - 1) {
        currentIndex = 0;
      }
      jumpTo();
    }
  });
});

</script>   

My angular page looks like this:

import { Component } from '@angular/core';
declare var $: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

}

How can I use the code inside my angular? p:s: I can already use jquery in the Angular project

Answer 1

Step 1. Make sure you have jQuery mentioned in the scripts section of the angular-cli.json

"scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
        ]

Step 2. In your app.component.ts right after import { Component, OnInit } from '@angular/core'; add declare var $:any; like this:

import { Component, OnInit } from '@angular/core';
declare var $:any;

Step 3. Although not compulsory, but I find it safer to put jQuery and JS code inside ngOnInit() like this:

ngOnInit() {
    $('.carousel').carousel({
        interval: 2000
    });
}

I hope this works.