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>应为每个<my-li>元素显示的标记之前和之后添加自定义内容.

@Component(
  selector: '[myLi]', // '[my-li]', 
  template: '<ng-content></ng-content>'
  ...)