假设,我们有一些样式列表：
<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>' ...)
