角模板和容器的样式递归css答案

【问题标题】：Style recursive css for angular template and container角模板和容器的样式递归css
【发布时间】：2017-09-06 18:43:04
【问题描述】：

我在树递归调用中有我的 HTML 以显示树层次结构。我无法弄清楚如何在进行递归调用的 ng-container 中设置 css 样式。

<ul>
  <ng-template #recursiveList let-list>
   <li *ngFor="let item of list" [selected]="isSelected">
     <span> {{item.title}} </span>
    <ul *ngIf="item.children.length > 0">
       <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
    </ul>
   </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

CSS：

ul > li { 列表样式：无； &.selected { 颜色：红色； } 跨度{字体大小：16px；颜色：绿色； } }

【问题讨论】：

您需要对哪些元素设置样式以及如何设置样式？
如果您使用组件而不是ngTemplateOutlet 会更容易，然后您可以将样式添加到组件并通过传递给@Input()s 的值来控制它。
@Gosha_Fighten 我更新了我想要设置样式的 CSS。
@GünterZöchbauer 当我使用另一个组件并使用@Input() 传递值时，我无法设置所选元素的样式。
那为什么不能给组件设置样式呢？

标签： css angular recursion tree

【解决方案1】：

您需要使用Binding targets 主题中所述的class.selected 语法来应用CSS 类绑定。然后，我相信列表项具有isSelected 属性。它不是全球性的。所以，代码应该是：

<li *ngFor="let item of items" [class.selected]="item.isSelected">
  <span>{{item.title}}</span>
  <ng-container *ngTemplateOutlet="List; context:{ $implicit: item.children }"></ng-container>
</li>

请参阅说明这一点的 plunk。

【讨论】：