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

Question

我有一个使用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属性相互中断？

Answer 1

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

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

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