2017-01-17 11 views
2

ブートストラップのパネルを使用してデータを表示するコンポーネントがあります。角2:別のhtml要素IDを持つページで同じコンポーネントを使用するにはどうすればよいですか?

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属性が互いに中断することなく、同じページで同じコンポーネントを複数回使うことができますか?

+1

を何 'id'明示的に<アプリケーション・パネルID = ""[タイトル] = "タイトル1"['のような設定についてデータ] = "データ1"> '? –

+0

私はあなたのidとhref属性をコンポーネントに設定したものにバインドするようにテンプレートhtmlを変更したいと思う。 htmlが無効なので、DOM内に同じIDの複数のインスタンスを持つことはできません。 – cobolstinks

+0

@ 123私の答えはあなたのために働いたのですか? –

答えて

1

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

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

@Input() 
id: String = "panel"; 
関連する問題