带有引导程序的 Angular 2 指令

Question

我正在尝试使用引导程序在 Angular 2 中创建一个简单的列表组，我将其放置在 item.component.ts 中，将 ul 放置在 list.components.ts 中但我不知道如何删除角度 2 中的组件指令。

//list.component.ts
<ul class="list-group">
  <my-list *ngFor....> //how to remove this from the view
    //item.component.ts
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    etc.
  </my-list>
</ul>

我不想使用 ng2-bootstrap，只要在浏览器中呈现指令，我的列表组就无法正常工作！

我查看了之前的问题，但找不到任何好的答案如何使这项工作？人们是如何解决这个问题的，我知道 angular1 有 replace:true 来处理这些问题，但在 angular2 中不再。

1.我是否应该在我的 my-list 上添加“css”，使其表现得像 li 并在 div 周围放弃它？但是我必须在我需要使用的每个引导组件上执行此操作！

2.我应该停止使用 item.component.ts 并保留 list.component.ts 中的所有内容来解决此问题吗？

Answer 1

Angular2 不支持 Angular 1 中的 replace: true 功能。

您可以利用选择器中的属性来附加组件：

@Component({
  selector: '[my-component]'
  (...)
})

并以这种方式使用它：

<div my-component>
  <tr>...</tr>
</div>