Question

我正在使用带有Angular 2的bootstrap 3来折叠/隐藏内容。双击按钮时我需要能够折叠。我为此创建了一个函数，但似乎无法访问我的typescript中的.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

您的 toggleMe 功能应如下所示：

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

那是因为你需要jQuery对象来访问 collapse 函数，但在event.target中你有纯DOM对象。

Answer 2

嘿使用$ close一直使用自适应模式使用角度为我。

  <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 3

所以我无法找到一个完美的解决方案而不是使用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导入到您的app。

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'
         }

在angular / typescript中触发bootstrap js collpase（）函数

3 个答案: