Angular 2 单击稍后放置的元素

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]属性，当你使用*ng时如果元素没有在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 单击稍后放置的元素

Angular 2 click on later placed element

javascript

jquery

semantic-ui

angular