Question

我的页面基本上分为两部分：

<div *ngIf="initState">
  <div class="ui accordion">
    <div class="title">
      <i class="dropdown icon"></i>
      Title
    </div>
    <div class="content">
     {{ someText }}
    </div>
  </div>
  <button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
  <div class="ui accordion">
    <div class="title">
      <i class="dropdown icon"></i>
      Another title
    </div>
    <div class="content">
     {{ someOtherText }}
    </div>
  </div>
</div>

关键在于initalState中的手风琴可以正常工作，但是处于非初始状态的手风琴没有 - 对该元素的点击没有反应。在我的情况下，很容易进行解决方案，但是如果没有解决方法我应该怎么做呢？如何进行第二次手风琴调用：

<script language='javascript'>
    $(document).ready(function(){
       $('.ui.accordion').accordion();
    });
</script>

Answer 1

使用[hidden]属性，当你使用* ngIf时，没有在dom中创建元素，所以jQuery无法在其上初始化手风琴。

<div [hidden]="!initState">
  <div class="ui accordion">
    <div class="title">
      <i class="dropdown icon"></i>
      Title
    </div>
    <div class="content">
     {{ someText }}
    </div>
  </div>
  <button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
  <div class="ui accordion">
    <div class="title">
      <i class="dropdown icon"></i>
      Another title
    </div>
    <div class="content">
     {{ someOtherText }}
    </div>
  </div>
</div>

Angular 2点击后面放置的元素

1 个答案: