Создание treeview в Angular 2

Question

Я тестирую дерево в Angular 2. В настоящее время я имею в виду http://plnkr.co/edit/vd9XXAQTHXxkCXaSjUHb. Есть некоторые части, которые я не могу понять, особенно content-list.component.ts. Внутри li существует класс с именем «tree__branch». Это уже существующий класс? Я полностью не могу понять. И есть переменная с именем «toggle» в contentNode, но я не могу найти эту переменную в contentNode внутри Component, как мы могли бы ее использовать? И моя конечная цель - изменить «-» и «+» на значки. Если кто-то знаком с этими вещами, не могли бы вы дать несколько путеводителей?

<ol class="tree"> 
      <li *ngFor="#contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}"> 
       <a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="toggle">{{ !!contentNode.toggle ? '-' : '+' }}</a> {{ contentNode.Name }} 
       <content-list *ngIf="contentNode.toggle" [startingNode]="contentNode.Id"></content-list> 
      </li> 
     </ol> 
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div> 

Answer 1

class="tree__branch"

просто старый стиль класс обычный HTML CSS. Вы можете использовать его для стилизации с помощью CSS. Это вовсе не Угловое.

тумблер просто атрибут, добавленный к элементам данных, загруженных из app/data.json, что указывает на открытую/закрытое состояние узла

Чтобы получить иконкам, а +/- текст просто использовать

<a *ngIf="contentNode.HasChildren" (click)="contentNode.toggle=!contentNode.toggle" class="toggle"> 
    <img src="expand.png" *ngIf="!!contentNode.toggle"> 
    <img src="collapse.png" *ngIf="!contentNode.toggle"> 
</a> {{ contentNode.Name }}