角2：別のhtml要素IDを持つページで同じコンポーネントを使用するにはどうすればよいですか？

Question

ブートストラップのパネルを使用してデータを表示するコンポーネントがあります。

data-toggle属性を使用して折りたたみパネルを作成しました。

panel.component.html

<div class="panel panel-primary"> 
    <div class="panel-heading clickable" href="#panel" data-toggle="collapse"> 
    <h4 class="panel-title">{{title}}</h4> 
    </div> 
    <div id="panel" class="panel-collapse collapse in"> 
    <!-- Some data here --> 
    </div> 
</div> 

それが必要として、今、私は同じページに二回

トップパネルのヘッ​​ダーを押す

<app-panel [title]="title 1" [data]="data1"></app-panel> 
<app-panel [title]="title 2" [data]="data2"></app-panel> 

を、このコンポーネントを使用する、（トップパネルの体を崩壊）。

問題は、下部パネルのヘッ​​ダーを押すと、上部パネルの本体が折りたたまれてしまうことです。

ブラウザの要素を調べた後、同じID（）を使用していることがわかりました。

たとえば、ng2-bootstrapモジュールを使用して修正することができますが、サードパーティのモジュールを追加することなく修正することをお勧めします。

どのように私はid属性が互いに中断することなく、同じページで同じコンポーネントを複数回使うことができますか？

Answer 1

代わりに、タイトルとデータを渡したようにidをパラメータとして渡すこともできます。同じメソッドを使用して、使用するIDを渡し、指定されていない場合はデフォルトのIDを使用できます。

次のようなものかもしれないpanel.component.tsで

：

@Input() 
id: String = "panel";