我是Angular的新手，我很难弄清楚如何将重复的代码重构为组件，而没有组件插入额外的标签会导致我的CSS和DOM结构出现问题 .

例如，如果我有一个Bootstrap样式的 <dl> 列表：

<dl class="row">
    <dt class="col-sm-4">Obi-Wan</dt>
    <dd class="col-sm-8">hermit</dd>
    <dt class="col-sm-4">Luke</dt>
    <dd class="col-sm-8">farmer</dd>
  </dl>

我想删除重复的样式，我想添加其他功能（如工具提示）而不重复每个标记，所以我创建并使用定义组件：

<dl class="row">
    <app-definition caption="Obi-Wan">hermit</app-definition>
    <app-definition caption="Luke">farmer</app-definition>
  </dl>

但是现在 <app-definition> 在DOM树中获得了自己的节点，因此样式和 <dl> 语义都搞砸了 .

Here's a Plunker证明了这一点 . （对于我的应用程序，一些dt dd节点可能具有不同的属性，并且一些dd节点可能具有更复杂的内容，因此将数据中的所有内容填充然后使用 ngFor 将是不合适的 . ）

关于如何重构这个以减少重复而不会导致我的DOM出现问题的任何建议？我习惯于React，其中调用组件可以替换该组件返回的内容，而不是必须插入新标签 .

angular dom