角度テンプレートとコンテナのスタイル再帰的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>李{ のlist-style：なし; & .selected {color：red; } span {font-size：16px;色：緑; }}

Answer 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を参照してください。