角度组件与CSS + DOM的交互

Question

我是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将是不合适的。）< / p>

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