打字稿 - 擴展和折疊bootstrap手風琴

Question

使用typescript如何擴展和折疊bootstrap面板嘗試下面的代碼，但沒有成功。 我想打開打字稿。

代碼1

<div class="panel panel-white">
    <div class="panel-heading removeColor" id="passins_heading">
            <h6 class="panel-title">
                <button class="collapsed" id="openPassion" data-toggle="collapse" data-target="#Passions" >Click Here</button>
            </h6>           
    </div>

    <div id="Passions" class="panel-collapse collapse">
        <div class="panel-body">                

                    Content -1              
        </div>
    </div>
</div>

索2

<div class="panel panel-white">
        <div class="panel-heading removeColor" id="passins_heading">
                <h6 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href="#Passions"> Click Here </a>
                </h6>           
        </div>

        <div id="Passions" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="form-group">

                        Content -1                                              

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery的：

import * as JQuery from 'jquery';


setTimeout(() => {
                JQuery( '#openPassion' ).toggle();
            }, 5000 );

如何擴展和折疊組件？

Answer 1

一個可能的解決方案可能是這樣的：

首先，在按鈕上創建一個引用： <button #myButton ...

然后在您的代碼中，您可以使用ViewChild裝飾器來查找它：

  @ViewChild('myButton')
  private myButtonRef: ElementRef;

然后，您可以在控件類中“單擊”它：

setTimeout(() => {
            this.myButtonRef.nativeElement.click();
        }, 1000 );  }

在這里工作的plunker 。