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属性が互いに中断することなく、同じページで同じコンポーネントを複数回使うことができますか?
を何 'id'明示的に<アプリケーション・パネルID = ""[タイトル] = "タイトル1"['のような設定についてデータ] = "データ1"> '? –
私はあなたのidとhref属性をコンポーネントに設定したものにバインドするようにテンプレートhtmlを変更したいと思う。 htmlが無効なので、DOM内に同じIDの複数のインスタンスを持つことはできません。 – cobolstinks
@ 123私の答えはあなたのために働いたのですか? –