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:
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?