css – Angular(2)：封装> tag的组件

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

<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中有一个指令的替换选项,但在Angular 2中它不存在afaik.

解决方法

Angular2回答

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

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

并使用它

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

Angular2没有替换选项,并且在一段时间内它也在Angular 1.x中被弃用.

允许您的< my-li>的用户要传递自定义内容,请添加< ng-content>< / ng-content>标记到模板(您可以在< ng-content>标记之前和之后添加自定义内容,该标记应为每个< my-li>元素显示.

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