Angular（2）：封装<li>标签的组件

Question

假设我们有一些样式列表：

<ul>
  <li>...</li>
  <li>...</li>
  ...
</ul>

现在我们要将每个<li>项封装到单独的组件中。这样做，我们在生成的DOM中得到类似的东西：

<ul>
  <my-item><li>...</li></my-item>
  <my-item><li>...</li></my-item>
  ...
</ul>

问题是，它打破了造型。我们将在项目，错误的边界等之间得到错误的边距。如果我们使用外部css，问题变得讨厌。

那么，有没有办法直接将<li>样式应用于<my-item>而无需编辑外部css文件？在Angular 1.x中，指令有replace选项，但在Angular 2中它不存在。

Answer 1

Angular2回答

正如@enguerranws所提到的那样，为组件使用属性选择器而不是标签选择器

@Component(selector: '[myLi]', ...
//@Component(selector: '[my-li]', ...

并像

一样使用它

<li myLi>...
<!-- <li my-li>... -->

Angular2没有replace选项，并且它在Angular 1.x中也被弃用了一段时间。

要允许<my-li>的用户传递自定义内容，请在模板中添加<ng-content></ng-content>标记（您可以在每个<ng-content>标记之前和之后添加自定义内容{1}}元素。

<my-li>

Answer 2

Kinda Late，但是如何使用以下解决方案

<ul>
  <my-item class='myLi'>...</my-item> <!-- or -->
  <my-item [ngClass.myLi]='isList'>...</my-item> 
  ...
</ul>

并在您的CSS上：

.myLi {
    display: list-item;
    // and everything else you've styled your li
}