Не работает анимация JQuery в приложении angular 5

Question

Я нашел этот пример того, как создать фиксированный складной нижний колонтитул, используя Angular 5 с .netcore 2.0. Я пытаюсь использовать пример в угловом приложении 5, но анимация не воспроизводится, и не вызывается предупреждение для $('#collapseOne').on. Но кнопка теста выдает сообщение об успешном выполнении как Быстрый тест, чтобы проверить, правильно ли настроен jQuery.

Машинопись:

ngOnInit(): void {
    $(document).ready(function () {

        $('#test').click('click', function (e) {
        alert('success');
    });
    $('#collapseOne').on('show.bs.collapse', function () {
        alert('success')
        $('.panel-heading').animate({

          backgroundColor: "#515151"
      }, 500);
    })

    $('#collapseOne').on('hide.bs.collapse', function () {
        alert('success')
        $('.panel-heading').animate({
          backgroundColor: "#00B4FF"
      }, 500);
    })
  });
}

Html:

<div id="test">test</div>
<div class="col-sm-3 sidenav">
  <app-nav-menu></app-nav-menu>
</div>
<div class="col-sm-9">
  <router-outlet> </router-outlet>
</div>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" [routerLink]="[{ outlets: { primary: ['operatorControl'],sidebar: ['List'] } }]">
          Click Me
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, adipisci, quibusdam, minima ratione voluptas quidem porro sint nobis odio cupiditate alias nisi. Magnam et fugiat labore eum at adipisci ex.
      </div>
    </div>
  </div>
</div>

Answer 1

Если вы используете приложение angular-cli, выполните следующие действия:

1. установите jQuery с помощью npm

npm установите jquery - сохранить

перейдите в файл ./angular-cli.json в корне вашей папки проекта Angular CLI, найдите свойство scripts: [] и укажите путь к jQuery

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

Теперь, чтобы использовать jQuery, все, что вам нужно сделать, это импортировать его следующим образом в компонент, который вы хотите использовать jQuery

import * from 'jquery';

или

объявить переменную $: любую;