Css 封装的角度组件<；李>；标签

假设我有一些样式列表：

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

...

现在我想将每个

项封装到单独的组件中。这样，我们在生成的DOM中得到如下结果：

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

...

问题是，它破坏了样式。我们会在项目之间获得错误的边距、错误的边框等，如果我们使用外部CSS，问题就会变得严重

---

那么，有没有一种方法可以在不编辑外部CSS文件的情况下将

样式直接应用于

？在AngularJS中，有一个指令的替换选项，但在AngularJS中，它并不存在。

Angular2答案

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

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

像这样使用它

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

---

有点晚了，但是使用下面的解决方案怎么样

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

---

您使用的是什么库？通常在类中有相同的元素选择器。为什么需要包装

？您不能简单地使用指令（

或just）？甚至更简单的，ngRepeat？enguerranws，在Angular 2中，指令不应该有模板。如果我需要在里面显示一些数据呢？当然，使用额外的DOM操作是可行的，但我认为这不是一个好主意。另一方面，组件总是将其内容包装到外部标记中。@Trorl您使用的是哪个库？。同样，它应该具有与css类匹配的样式，而不仅仅是html元素。@Trorl“in Angular2指令不应该具有模板”是什么意思？如果您要添加内容，使用组件而不是指令。组件有一个模板。此解决方案的问题是无法在组件内部的li标记上添加属性，例如ng类。还是有可能？当然。您可以添加

@HostBinding（'attr.someattr'）isSomeAttr:boolean=false。如果设置
this.isSomeAttr=true
，然后添加属性
someattr
，就像
糟糕，我正试图用Angular 1.5组件来做这件事，我认为这个问题是关于它们的。这是因为问题中不清楚：-/我在答案中使它更突出。你能修正你的语法吗？它应该是选择器“[custom attribute name]”，而不是包含字符串的数组。
<ul>
  <my-item class='myLi'>...</my-item> <!-- or -->
  <my-item [ngClass.myLi]='isList'>...</my-item> 
  ...
</ul>

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