封装 <li> 标签的 Angular 组件答案

【问题标题】：Angular component that encapsulates <li> tag封装 <li> 标签的 Angular 组件
【发布时间】：2016-02-26 19:16:04
【问题描述】：

假设我有一些样式列表：

<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 文件？在 AngularJS 中有一个用于指令的 replace 选项，但在 Angular 中它不存在 afaik。

【问题讨论】：

【解决方案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> 标记（您可以在每个<my-li> 元素应显示的<ng-content> 标记之前和之后添加自定义内容。

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

【讨论】：

这个方案的问题是不能在组件内部的li标签上添加属性，例如ng-class。或者有可能吗？
当然。您可以添加@HostBinding('attr.someattr') isSomeAttr:boolean = false;。如果你设置this.isSomeAttr = true;，那么属性someattr会像<li my-li someattr>一样添加
糟糕，我正在尝试使用 Angular 1.5 组件执行此操作，我认为这个问题与他们有关。
那是因为从问题中不清楚：-/我在答案中使其更加突出。
你能修正你的语法吗？它应该是选择器：'[custom-attribute-name]'，而不是包含字符串的数组。

【解决方案2】：

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

<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
}

【讨论】：