Как переписать функцию Jquery в angular 4?

Question

Я новичок в Angular 4. Следующая функция - та, которую мы сейчас используем в проекте asp.net.Работает отлично.Эта функция предназначена для изменения значка стрелки шрифта.

<script type="text/javascript">        
     $('.collapse').on('shown.bs.collapse', function () {
     $(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
     }).on('hidden.bs.collapse', function () {
     $(this).parent().find(".fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
   });
</script> 

Как написать вышеуказанную функцию в угловых 4?

Answer 1

    Step 1: Install jquery

    Run this command

    npm install jquery --save

    than decalre jquery in your Component file at top like below

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

    than you can use it directly any fuctioin of component file.
    ngOnInit()
    {
 $('.collapse').on('shown.bs.collapse', function () {
     $(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
     }).on('hidden.bs.collapse', function () {
     $(this).parent().find(".fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
   });
    }

Answer 2

Что касается сообщества и официальной документации, вам следует избегать использования jQuery с Angular, так как в самом Angular есть много способов для решения таких задач.Но все же, если вы чувствуете, что используете jQuery, тогда вы можете.

Просто добавьте этот код в конструктор вашего компонента / ngOnInit (хук жизненного цикла Angular):

$('.collapse').on('shown.bs.collapse',  () => {
      $(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
        }).on('hidden.bs.collapse', () => {
          $(this).parent().find(".fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");

Предполагая, что вы установили jQuery (еслине установлен, используйте команду npm i jquery --save)