Question

我正在测试Angular 2中的树视图。目前，我指的是http://plnkr.co/edit/vd9XXAQTHXxkCXaSjUHb。有些部分我无法理解，特别是content-list.component.ts。在li中，有一个名为＆＃39; tree__branch＆＃39;的类。这已经存在了吗？我完全无法理解它。还有一个名为＆＃39; toggle＆＃39;在contentNode中，但是我无法在Component中的contentNode中找到该变量，我们该如何使用它呢？我的最终目标是改变＆＃39; - ＆＃39;和＆＃39; +＆＃39;进入图标。如果有人熟悉这些事情，你能提供一些指导吗？

<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

app/data.json

只是旧式的纯HTML CSS类。您可以使用它来使用CSS进行样式设置。它根本不是与角度相关的。

toggle只是添加到从+加载的数据项的属性，表示节点的打开/关闭状态

要获取图标而不是- / <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 }}文字，请使用

{{1}}

在Angular 2中生成树视图

1 个答案: