Angular 2:如何在具有不同html元素ID的页面上使用相同的组件?

时间:2017-01-17 15:51:24

标签: html angular twitter-bootstrap-3

我有一个使用bootstrap面板显示一些数据的组件。

我使用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(id="panel")。

我知道可以通过使用ng2-bootstrap模块来修复它,但我更喜欢修复它而不向我的项目中添加额外的第三方模块。

那么如何在同一页面上多次使用相同的组件而不会使id属性相互干扰?

1 个答案:

答案 0 :(得分:1)

另一种方法是将id作为参数传递,就像传递了标题和数据一样。您可以使用相同的方法传递要使用的id,如果没有指定,则使用默认ID。

在panel.component.ts中你可以有类似的东西:

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