角色模板和容器的样式递归CSS

Question

我在树递归调用中有我的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 { 列表风格：无； ＆amp; .selected {颜色：红色;} 跨度{字体大小：16px;颜色：绿色；}}

Answer 1

您需要使用绑定目标主题中所述的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。