Запуск функции начальной загрузки js collpase () в angular / typcript

Question

Я использую загрузчик 3 с Angular 2 для свертывания / скрытия содержимого.Мне нужно иметь возможность рухнуть при двойном нажатии на кнопку.Я создал для этого функцию, но, похоже, не могу получить доступ к функции .collapse () в моем наборе

документов для начальной загрузки

<div class="container">
  <h2>Simple Collapsible</h2>
  <button (dblclick)="toggleMe($event)" type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

.ts

toggleMe($event){
   event.target.collpase('toggle')    //is not a function
}

Как получить доступ к функции переключения, чтобы использовать ее в функции двойного щелчка?

Answer 1

Эй, используя $ close, я всегда работал с моделями начальной загрузки, используя angular для меня.

  <div class="modal-footer hidden-print">
        <button type="submit" class="btn btn-success" ng-click="vm.saveTeam($close())"> Save </button>
        <button type="button" class="btn btn-default" ng-click="$close()">Cancel</button>

    </div>
</form>

Answer 2

Так что мне не удалось найти идеальное решение, а не использовать jquery, который я не хотел использовать в своем приложении. Мне удалось добиться большей функциональности, используя Angular Animate вместо Bootstrap Collpase, см. Код ниже:

 <button (dblclick)="toggleMe()" type="button">Simple collapsible</button>

  <div [@visibilityChanged]="visiblityState" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

.ts

Добавьте анимации в @Component, не забудьте импортировать Angular Animations в ваше приложение.

import { trigger, state, style, animate, transition } from '@angular/animations';


@Component({
   selector: 'my-component',
   templateUrl: './tree-search-node.component.html',
      animations: [
       trigger('visibilityChanged', [
       state('shown', style({
                      height: '0px',
                      opacity: '0',
                      overflow: 'hidden',
                     // display: 'none'
        })),
       state('hidden', style({
                       height: '*',
                       opacity: '1',
                      // display: 'block'
    })),
  transition('shown => hidden',animate('200ms ease-in')),
  transition('hidden => shown', animate('200ms ease-out')),
      ])
    ]
 })


 visiblityState = 'shown';

   toggleMe() {
      if (this.visiblityState === 'hidden')
           this.visiblityState = 'shown'
      else
            this.visiblityState = 'hidden'
         }

Answer 3

Ваша функция toggleMe должна выглядеть следующим образом:

toggleMe($event){
   $($event.target).collpase('toggle');
}

Это потому, что вам нужен объект jQuery для доступа к функции collapse , но в event.target у вас естьчистый объект DOM.