css - Angular 模板和容器的样式递归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 { list-style: none; &.selected { color: red; } span { font-size: 16px; color: green; } }

Answer 1

您需要使用 Binding targets 中描述的 class.selected 语法应用 CSS 类绑定(bind)的主题。然后，我相信列表项具有 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这说明了这一点。