2017-12-31 39 views
0

So bin ich eine grundlegende Strukturansicht zu machen, nur eine Verzeichnisstruktur mit den Komponenten zur Liste:Knoten zum Öffnen/Schließen Logik für eine grundlegende TreeView

MyTreeMenuComponent [Typoskript] (Parent):

@Component({ 
    selector: 'mytree-menu', 
    template: `<div style="margin-left:30px"> 
       <mytree [treeItems]="treeItems"> Loading.. </mytree> 
       <ng-content></ng-content> 
      <div>`, 
}) 

export class MyTreeMenuComponent implements OnInit { 
    treeItems: any; 
    constructor(private http: Http, @Inject('BASE_URL') private baseUrl: string){} 

    ngOnInit() { 
    this.fetchFileList(); // function assigns directory listing to `treeItems` 
    } 
} 

MyTreeComponent [Typoskript] (Kind):

@Component({ 
    selector: 'mytree', 
    templateUrl: './mytree.component.html', 
}) 

export class MyTreeComponent { 
    @Input() treeItems: any; 
    constructor(public omni: OmniService) { } 
    setSelection(val: any) { 
    this.omni.selectedFile = val; 
    } 
} 

MyTreeComponent [HTML]:

<li *ngFor="let item of treeItems?.children"> 
    <a (click)="showList = !showList; setSelection(item)"> 
    {{ item?.name + (item?.isFile ? "" : " [" + item?.size + "]") }} 
    </a> 
    <ul *ngIf="showList"> 
    <mytree [treeItems]="item"></mytree> 
    </ul> 
</li> 

In der HTML-Datei können Sie sehen, es rekursiv gemacht hat, so dass der Baum mit Unterknoten so lange angelegt wird weiterhin, wie es Kinder hat. Es ist ziemlich einfach und ich möchte keine ausgefallenen Funktionen, also werde ich keine Optionen für Drittanbieter haben. Alles feinen, außer für den fehlerhaften Knoten Öffnen/Schließen Logik funktioniert:

enter image description here

Ein Klick auf einen Knoten öffnet/schließt es benachbarten Knoten ist. Was mache ich hier falsch oder was kann man mehr im HTML oder TypeScript tun, damit nur der angeklickte Knoten öffnet/schließt?

Antwort

0

Die Lösung gefunden!

Added ein boolean isExpanded in der item Schnittstelle und dann:

MyTreeComponent [HTML]:

<li *ngFor="let item of treeItems?.children"> 
    <a (click)="setSelection(item)"> 
    {{ item?.name + (item?.isFile ? "" : " [" + item?.size + "]") }}</a> 
    <!-- Replace `*ngIf="showList"` with `*ngIf="item.isExpanded"` --> 
    <ul *ngIf="item.isExpanded"> 
    <mytree [treeItems]="item"></mytree> 
    </ul> 
</li> 

MyTreeComponent [Typoskript] (Kind):

//codes above 
setSelection(val: any) { 
    this.omni.selectedFile = val; 
    val.isExpanded = !val.isExpanded; //added this 
} 

Jetzt funktioniert alles wie erwartet.